Flex布局教程之-------flex入门demo07一些常见的布局 重点理解：flex同样可以使用浮动float和flex布局也需要微调样式（即CSS设置。）。
@实例效果：
@实例代码：
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=0″>
<!– 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ –>
<title>flex入门demo07一些常见的布局</title>
<!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
<link href=”css/template.css” rel=”stylesheet”>
<style type=”text/css”>
/*输入框布局样式*/
.InputAddOn {
text-align: center;
display: flex;
}
.InputAddOn-field {
width:282px;
height:40px;
margin-left:23px;
flex: 1;
}
/*悬挂式布局样式*/
.Media-all-left,.Media-all-right{
flex-direction:column;
display:inline-flex;
}
.Media {
width:373px;
height:139px;
background-color: #F4F3F0;
display: flex;
/*align-items: flex-start;*/
}
.Media-figure {
margin-right: 0em;
width:50px;
height:50px;
padding:13px;
}
.Media-body {
padding:13px;
flex: 1;
}
.two-items{
display: flex;
}
.item{
width:373px;
height:139px;
background-color: #F4F3F0;
flex:1;
}
.p-body{
padding:13px;
}
</style>
<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –>
<!– WARNING: Respond.js doesn\’t work if you view the page via file:// –>
<!–[if lt IE 9]>
<script src=”//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js”></script>
<script src=”//cdn.bootcss.com/respond.js/1.4.2/respond.min.js”></script>
<![endif]–>
</head>
<body>
<!– 1，输入框布局：我们常常需要在输入框的前方添加提示，后方添加按钮。 –>
<div style=”width:778px;margin:50px auto;”>
<h1 style=”width:120px;margin:30px auto;”>输入框布局</h1>
<div class=”InputAddOn”>
<span class=”InputAddOn-item” style=”width:78px;height:40px;line-height:40px;border:1px solid #E3E9EF;border-right:0;”>Amount</span>
<input class=”InputAddOn-field” style=”padding:0;border:1px 0 1px 1px;margin-left:0;”>
<input class=”InputAddOn-field” style=”padding:0;border:1px 0 1px 1px;”>
<button class=”InputAddOn-item” style=”width:43px;height:42px;border:1px solid #E3E9EF;color:#807FAC;border-left:0;”>Go</button>
</div>
<br><br>
<div class=”InputAddOn”>
<span class=”InputAddOn-item” style=”width:78px;height:40px;line-height:40px;border:1px solid #E3E9EF;border-right:0;”>Amount</span>
<input class=”InputAddOn-field” style=”padding:0;border:1px 0 1px 1px;margin-left:0;”>
<a href=”#”><button class=”InputAddOn-item” style=”width:43px;height:42px;border:1px solid #E3E9EF;color:#807FAC;border-left:0;”>Go</button></a>
</div>
<br><br>
<!– 2，悬挂式布局 –>
<h1 style=”width:120px;margin:30px auto;”>悬挂式布局</h1>
<div class=”Media-all-left”>
<div class=”Media”>
<img class=”Media-figure” src=”images/cat.jpg” alt=””>
<p class=”Media-body”>鱼人，在燃烧军团入侵以后，娜迦族强大的领袖Slardar在海底深处苏醒。当他发觉世界正在被混乱主宰的时候，他意识到这正是打败可恨的暗夜精灵的最佳时机。和天灾军团结成同盟以后，Slardar在战斗中以他强大的力量击晕并碾碎对手，Slardar在战斗中以他强大的力量击晕并碾碎对手。</p>
</div>
<div style=”height:20px;”></div>
<div class=”Media” style=”height:120px;”>
<img class=”Media-figure” src=”images/cat.jpg” alt=””>
<p class=”Media-body”>鱼人，在燃烧军团入侵以后，娜迦族强大的领袖Slardar在海底深处苏醒。当他发觉世界正在被混乱主宰的时候，他意识到这正是打败可恨的暗夜精灵的最佳时机。和天灾军团结成同盟以后，Slardar在战斗中以他强大的力量击晕并碾碎对手。</p>
</div>
</div>
<div class=”Media-all-right” style=”margin-left:20px;”>
<div class=”Media” style=”width:381px;height:229px;”>
<img class=”Media-figure” src=”images/cat.jpg” alt=””>
<p class=”Media-body”>鱼人，在燃烧军团入侵以后，娜迦族强大的领袖Slardar在海底深处苏醒。当他发觉世界正在被混乱主宰的时候，他意识到这正是打败可恨的暗夜精灵的最佳时机。和天灾军团结成同盟以后，Slardar在战斗中以他强大的力量击晕并碾碎对手，鱼人，在燃烧军团入侵以后，娜迦族强大的领袖Slardar在海底深处苏醒。当他发觉世界正在被混乱主宰的时候，他意识到这正是打败可恨的暗夜精灵的最佳时机。和天灾军团结成同盟以后，Slardar在战斗中以他强大的力量击晕并碾碎对手。</p>
</div>
</div>
<br><br>
<h3 style=”color:red;”>Non-images @案例：flex同样可以使用浮动float！！！</h3>
<br>
<div class=”Media” style=”float:left;”>
<p class=”Media-body”>1，鱼人，在燃烧军团入侵以后，娜迦族强大的领袖Slardar在海底深处苏醒。当他发觉世界正在被混乱主宰的时候，他意识到这正是打败可恨的暗夜精灵的最佳时机。和天灾军团结成同盟以后，Slardar在战斗中以他强大的力量击晕并碾碎对手，Slardar在战斗中以他强大的力量击晕并碾碎对手。</p>
</div>
<div style=”height:20px;”></div>
<div class=”Media” style=”float:left;margin-left:20px;”>
<p class=”Media-body”>2，鱼人，在燃烧军团入侵以后，娜迦族强大的领袖Slardar在海底深处苏醒。当他发觉世界正在被混乱主宰的时候，他意识到这正是打败可恨的暗夜精灵的最佳时机。和天灾军团结成同盟以后，Slardar在战斗中以他强大的力量击晕并碾碎对手。</p>
</div>
<div style=”clear:both;height:20px;”></div>
<h3>Non-images</h3>
<br>
<div class=”two-items”>
<div class=”item”>
<p class=”p-body”>1，鱼人，在燃烧军团入侵以后，娜迦族强大的领袖Slardar在海底深处苏醒。当他发觉世界正在被混乱主宰的时候，他意识到这正是打败可恨的暗夜精灵的最佳时机。和天灾军团结成同盟以后，Slardar在战斗中以他强大的力量击晕并碾碎对手，Slardar在战斗中以他强大的力量击晕并碾碎对手。</p>
</div>
<div class=”item” style=”margin-left:20px;”>
<p class=”p-body”>2，鱼人，在燃烧军团入侵以后，娜迦族强大的领袖Slardar在海底深处苏醒。当他发觉世界正在被混乱主宰的时候，他意识到这正是打败可恨的暗夜精灵的最佳时机。和天灾军团结成同盟以后，Slardar在战斗中以他强大的力量击晕并碾碎对手。</p>
</div>
</div>
</div>
<!– jQuery (necessary for Bootstrap\’s JavaScript plugins) –>
<script src=”js/jquery.min.js”></script>
<!–或者用网络版本：<script src=”//cdn.bootcss.com/jquery/1.11.3/jquery.min.js”></script>–>
<!– Include all compiled plugins (below), or include individual files as needed –>
<script src=”js/bootstrap.min.js”></script>
<script type=”text/javascript”>
</script>
</body>
</html>