flex布局总结回顾

1.背景

　　传统css盒式模型，依赖 display属性 + position属性 + float属性实现页面的布局，而随着互联网的迅猛发展，带动了无数的互联网创业者和互联网产品，因而样式布局的美化成为了重要的竞争点，带动前端布局样式迅速发展，传统的布局方式已不能完全胜任当下的前端需求。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。近几年移动端发展迅速，而flex布局可以很好的适配移动端，因而取得了进一步的推广应用。

2.flex布局简介

　　flex是flexible box（弹性盒子）的缩写，故flex布局也被叫作“弹性布局”。

　　任何一个容器都可以指定为flex布局display:flex;；行内元素也可以使用flex布局display:inline-flex;；webkit内核的浏览器需加上-webkit display:-webkit-flex;。
　　设置为flex布局后，子元素的float、clear、vertical-align属性失效，此时使用justify-content、align-items来设置对齐方式。

3.基本概念

　　flex布局的元素被称为flex容器，子元素被称为容器的flex项目；容器默认水平（main）和垂直（cross）两个坐标轴；项目默认沿main轴排列，其单个项目占据的空间叫作main size和cross size。

4.容器相关属性

　　flex布局的元素有flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content共6个css属性。

4.1 flex-direction

　　顾名思义，布局的方向，其值有row | row-reverse | column | column-reverse，顾名思义，效果就是横排、横排倒序、竖排、竖排倒序，默认row。

4.2 flex-wrap

　　顾名思义，wrap（包裹）布局超出设置，其值有nowrap | wrap | wrap-reverse，分别是不换行，换行，换行倒序，不换行就是直接压缩排布不换行，后两者是换行，区别是wrap换行后新行在下边，后者相反在上边，默认nowrap。

　　示例：

代码：

     <div class="p-box">

         <div class="c-box">1</div>

         <div class="c-box">22</div>

         <div class="c-box">333</div>

         <div class="c-box">4444</div>

         <div class="c-box">55555</div>

         <div class="c-box">666666</div>

     </div>

         .p-box {

             display: flex;

             flex-flow: row wrap-reverse;

             width: 500px;

             height: 500px;

             background-color: #ababab;

         }

         .p-box div {

             color: white;

             width: 100px;

             margin: 10px;

         }

4.3 flex-flow

　　是前边两个属性的缩写，是其合在一起的写法，比如：flex-flow: column-reverse nowrap;。

4.4 justify-content

　　内容项目的排版对齐方式，且是在main轴（横向）对齐方式，其值有flex-start | flex-end | center | space-between |space-around五个，效果分别是左对齐，右对齐，居中，两端对齐（中间等距），每个项目（子元素）间隔相等对齐，后3个属性都是居中，有一定类似，差别在于，center仅居中，不会计算除了两边之外的距离，space-between则是先帖这两边，剩余空间等距分割，space-around则是将两边纳入距离分割，但是由于中间部分是两个距离连在一起的，所以比两边的距离大一倍。

　　示例：

　　上图分别是center、space-around、space-between效果，可以看出具体的差别。

4.5 align-items

　　和前边一个属性类似，这个属性是设置纵向对齐方式，其值有flex-start | flex-end | center |baseline | stretch一样是5个，前3个同理是顶部和底部和居中对齐，baseline是以项目的第一行文字的基线对齐，stretch则是纵向拉伸占满（项目不设置高度或设为auto）（设置高度则是顶部对齐！）

　　示例：

　　上图分别是center、baseline、stretch效果，其中为了对比第一个没有设置宽度，第4个设置了黄色div 3的高度。

4.6 align-content

4.7 align-items和align-content的区别

　　两种都是设置内部元素的纵向对齐，且有上中下3个相同的值（flex-start | flex-end | center）；差别在于，align-content:center对单行是没有效果的,而align-items:center不管是对单行（未超出换行）还是多行（超出换行后）都有效果,而在我们日常开发中用的比较多的就是align-items。

　　示例：

　　说明：该图2是align-items：center，图1是在4.6和图2的基础上，将align-items：center改为align-content:center，可以看出，align-content会对同行设置成默认等高（1,2,4是没有设置高度的，却显示了3的高度）。并且center时可以理解为，align-content是将全部子元素看出一个元素块来处理的，因为图1可以看到两行是上下贴在一起的，而图2是上下等距分割的。其他值也稍有差异，这里不再赘述。

　　以上是flex容器的6个属性（2个类似属性和1个综合属性），其中4个设置点，分别是排布方向、超出换行处理、上下对齐、左右对齐。

5.内部元素属性

　　以上是flex容器的属性，以下是内部项目的属性：

5.1 order

　　顾名思义，顺序的意思，其值是任意整数integer（可以为负），小者布局在前。默认0。

5.2 flex-grow

　　放大比例，默认0，其值是任意非负整数number。

5.3 flex-shrink

　　缩小比例，默认1，等比例缩小。其值范围同上，如果设置为0，则不会被缩小。

5.4 flex-basis

　　意为固定宽度（main size），默认auto（自动缩放），如果设置为固定的长度如200px，则不会被缩放。

5.5 flex

　　flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。其有两个快捷值，auto（1 1 auto）和none（0 0 auto）；建议优先使用这个属性。

5.6 align-self

　　示例：

　　图示为设置了放大缩小和3的自身对齐后的样式。