Flex弹性布局

     布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。Flex布局可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

    Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

    它即可以应用于容器中，也可以应用于行内元素。

                                   

 

    一、基本概念

    采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

    容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

    项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

                                  

 

    二、属性总结表

    下图是关于flex的属性总结表，后面会详细介绍每个属性的意义和用法

                             

 

    三、容器属性详述

　1.flex-direction

　　　　决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row- reverse|column|column-reverse

　　　　row:主轴为水平方向，项目沿主轴从左至右排列

　　　　column：主轴为竖直方向，项目沿主轴从上至下排列

　　　　row-reverse：主轴水平，项目从右至左排列，与row反向

　　　　column-reverse：主轴竖直，项目从下至上排列，与column反向

                                                 

                                                   

 

 

　　2、flex-wrap

　　　　默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认)|wrap|wrap-reverse

　　　　nowrap：自动缩小项目，不换行

　　　　wrap：换行，且第一行在上方

　　　　wrap-reverse