@实例效果：
@实例代码：
<!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入门demo04网格布局和百分比布局</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/template.css" rel="stylesheet">
<style type="text/css">
.container{
width:960px;
margin:50px auto;
}
/*公共样式*/
.Grid {
display: flex;
}
.Grid-cell {
text-align:center;
line-height:58px;
font-size:14px;
font-weight: bold;
background-color: #F4F3F0;
height:58px;
flex: 1;
margin-right:20px;
}
/*百分比布局样式*/
/*flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
（1），flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
（2），flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
（3）,flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
*/
.Grid {
display: flex;
}
.Grid-cell {
flex: 1;
}
.u-full {
flex: 0 0 100%; /*这里百分比表示的是项目占用空间大小。*/
}
.u-1of2 {
flex: 0 0 50%;
}
.u-1of3 {
flex: 0 0 33.3333%;
}
.u-1of4 {
flex: 0 0 25%;
}
</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>
<div class="container">
<h1 style="width:100px;margin:30px auto;">网格布局</h1>
<div class="Grid">
<div class="Grid-cell">1</div>
</div>
<div style="height:20px;"></div>
<div class="Grid">
<div class="Grid-cell">1/2</div>
<div class="Grid-cell">1/2</div>
</div>
<div style="height:20px;"></div>
<div class="Grid">
<div class="Grid-cell">1/3</div>
<div class="Grid-cell">1/3</div>
<div class="Grid-cell">1/3</div>
</div>
<div style="height:20px;"></div>
<div class="Grid">
<!--根据项目的多少，自动分配空间，有1个项目，就独占空间。有2个项目就均分，以此类推。--!>
<div class="Grid-cell">1/4</div>
<div class="Grid-cell">1/4</div>
<div class="Grid-cell">1/4</div>
<div class="Grid-cell">1/4</div>
</div>
<div style="height:20px;"></div>
<div class="Grid">
<div class="Grid-cell" style="height:208px;line-height:14px;text-align:left;"> 你高中爱上的那个人，会是你这辈子最爱的，这段感情没有小学的无知，没有初中的朦胧，没有大学的利益，没有社会的现实，它有的只是我们内心最真实的感觉。。——亲爱的不二 </div>
<div class="Grid-cell" style="height:208px;line-height:14px;text-align:left;"> 人是否相爱的唯一方法，就是分开；分开以后，如果难受如果思念，那就是真爱。而真爱一定会让两个人，再次相遇。 ——亲爱的不二<br>
其实，一个人爱不爱你，是能够感觉到，而且这种感觉相当真切和准确，不用骗自己，更不用勉强自己。如果真的不行，要学会转身。——亲爱的不二<br>
我爱你，所以我给了你伤害我的权力，只要我能忍受，我会一直陪伴着你，但你不能伤害我太多。我冷了，会淡漠，痛了，会松手。——亲爱的不二<br>
在无数个睡不着的晚上，我相信会有很多人，习惯性的开始闭上眼睛，安静的想念一个人，想念一张脸。而在他们心里，能够有这样一个人可以想念，或许就够了。——亲爱的不二<br>
不要对爱你的人太过刻薄，一辈子真正对你好的人也没有几个。多少人在一切都将失去时才幡然醒悟，每个人都有脾气 ，为你忍下所有的怒气，仅仅因为那个人比你更心疼你。——亲爱的不二 </div>
</div>
<h1 style="width:120px;margin:30px auto;">百分比布局</h1>
<div class="Grid">
<div class="Grid-cell u-1of2">1/2</div>
<div class="Grid-cell">auto</div>
<div class="Grid-cell">auto</div>
</div>
<div style="height:20px;"></div>
<div class="Grid">
<div class="Grid-cell">auto</div>
<div class="Grid-cell u-1of3">1/3</div>
</div>
<div style="height:20px;"></div>
<div class="Grid">
<div class="Grid-cell u-1of4">1/4</div>
<div class="Grid-cell">auto</div>
<div class="Grid-cell u-1of3">1/3</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>
浙公网安备 33010602011771号