弹性布局
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
一、Flex布局是什么？
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
二、Flex布局的属性与用法
2.1：子元素div的水平垂直居中 justify-content | align-items<style> .box{ height:300px; border: 1px solid #ccc; display:flex; /*将div设置成弹性盒子*/ flex-direction :row; /*子元素的排列方式 默认从左到右*/ justify-content :center; /* 主轴 居中*/ align-items：center； /* 侧轴 居中*/ } .no { width:150px; height:150px; background:red; } </style> <-- html 标签--> <body> <div class="box"> <div class="no"></div> </div> </body>
justify-content： 定义子元素在主轴的对齐方式
justify-content：flex-start | flex-end | center | space-around | space-evenly | space-between
分别对应了 从左到右对齐（flex-start）从右到左对齐（flex-end）
居中对齐（center） 空白环绕（space-around）
左右对齐 平分空白区域（ space-between）
align-items:定义子元素在侧轴的对齐方式
2.2： 子元素左右对齐 空白平分 space-between
1 <style type="text/css"> 2 .box{ height: 160px; 3 display:flex; 4 justify-content:space-between; 5 border:1px solid #ccc;} 6 7 .no{ background:red; 8 width: 80px; 9 height: 80px;} 10 </style> 11 <body> 12 <div class="box"> 13 <div class="no">项目1</div> 14 <div class="no">项目2</div> 15 <div class="no">项目3</div> 16 </div> 17 </body>
justify-content 左右对齐后，将空白区域平分，与子元素无太多关系
2. 3 ：子元素左右对齐 空白平分 space-between
1 <style type="text/css"> 2 .box{ height: 160px; 3 display:flex; 4 justify-content:space-around ; 5 border:1px solid #ccc;} 6 7 .no{ background:red; 8 width: 80px; 9 height: 80px;} 10 </style> 11 <body> 12 <div class="box"> 13 <div class="no">项目1</div> 14 <div class="no">项目2</div> 15 <div class="no">项目3</div> 16 </div> 17 </body>
space-around与上述不同的是 space-between是左右对齐之后将空白平分而 space-around是空白环绕 每个子元素都有一定量的空白
2.4: Flex盒子的主轴与侧轴
flex-direction 指定伸缩容器(Flex盒子)主轴的伸缩流方向
flex-direction： 主轴的方向（即项目的排列方向）。 【box-lines】 flex-flow： flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap justify-content： 项目在主轴上的对齐方式。【box-pack】 align-items： 项目在交叉轴上如何对齐。【box-align】 align-content： 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-direction: row | row-reverse | column | column-reverse;
row 从左到右排列 row-reverse从右到左排列
column 从上到下排列 column-reverse从下到上排列
2.5： flex-wrap：指定伸缩项目是否沿着侧轴排列
nowrap：不换行，而是通过收缩每一个孩子的宽度来挤在一行。
wrap： 换行
wrap-inverse: 换行，但是折行方向相反
1 <style type="text/css"> 2 .box{ height: 400px; 3 display:flex; 4 justify-content:space-around ; 5 flex-wrap: wrap; 6 border:1px solid #ccc;} 7 8 .no{ background:red; 9 width: 100px; 10 height: 100px;} 11 </style> 12 <div class="box"> 13 <div class="no">项目1</div> 14 <div class="no">项目2</div> 15 <div class="no">项目3</div> 16 <div class="no">项目4</div> 17 </div>
如果给每个子元素都加上flex-grow：1；那么子元素将平分覆盖空白区
1 <style type="text/css"> 2 .box{ height: 400px; 3 display:flex; 4 border:1px solid #ccc;} 5 6 .no{ background:red; 7 width: 100px; 8 height: 100px; 9 flex:1; 10 margin: 1px; /*为了看出效果 加上1px的margin*/} 11 </style> 12 <body> 13 <div class="box"> 14 <div class="no">项目1</div> 15 <div class="no">项目2</div> 16 <div class="no">项目3</div> 17 <div class="no">项目4</div> 18 <div class="no">项目5</div> 19 20 </div> 21 </body>
这时候，如果我给第二个项目定义
flex-grow: 2，那么它的宽度是怎么计算的？ 项目的比例会变成1：2：1
