Html布局之CSS属性Flex

一、Flex是什么

        Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

        行内元素（display：inline） 也可以事用Flex进行布局（display:inline-flex）。

        webkit内核的浏览器使用方式：display:-webkit-flex

        注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、Flex概念解析    

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

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

3.  

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

三、Flex容器属性介绍

1.  flex-direction属性：用于设置主轴的排列方式。属性值包含（row:主轴水平方向，起点在左端；row-reverse:主轴水平方向，起点在右端；column:主轴垂直方向，起点在上方；column-reverse:主轴垂直方向，起点在下方）

2. flex-wrap属性：用于设置主轴的项目换行方式。属性值包含（nowrap:不换行；wrap:换行，第一行在上方；wrap-reverse:换行，第一行在下方）；默认值为不换行
3. flex-flow属性：是flex-direction属性和flex-wrap属性的简写形式。默认值为：row nowrap
4. justify-content属性：设置项目在主轴上的对齐方式。属性值包含（flex-start:左对齐；flex-end:右对齐；center:居中；space-between:两端对齐，项目之间的间隔相等；space-around:每个项目两侧的距离相等，项目之间的间隔比两端的间隔大一倍）
5. align-items属性：设置项目在交叉轴如何对齐。属性值包含（flex-start:交叉轴起点对齐；flex-end:交叉轴终点对齐；center:交叉轴居中对齐；baseline:项目文字的第一行基线对齐；stretch（默认值）:如果项目未设置高度或设置为auto，将占据整个交叉轴）

6. align-content属性：设置多跟轴线的对齐方式。只有一根轴线时，该属性不起作用。属性值包含（flex-start:与交叉轴的起点对齐；flex-end:与交叉轴的终点对齐；ceneter:与交叉轴的中点对齐；space-between:与交叉轴的两端对齐，轴线之间间隔平均分布；space-around:每根轴线的间隔都是相等，即轴线间隔比轴线到边框的距离大；stretch:轴线沾满整个交叉轴（默认值））

四、Flex项目属性介绍

1. order属性：定义项目的排列顺序，越小越靠前；默认值为0；
2. flex-grow属性：定义项目的放大比例，默认值为0，即存在剩余空间也不会放大；所有项目的flex-grow属性设置为1的时候，等分剩余空间；如果其中有一个项目的flex-grow属性设置为2，那么这个项目将比其他的项目的所占剩余空间大一倍；也就是说数值越大占的剩余空间越多，相同的等分剩余空间；
3. flex-shrink属性：定义项目的缩小比例，默认值为1，即空间不足，就会缩小；如果所有项目的该属性值都为1，那么就会全部等比缩小，如果其中有一个项目的该属性值为0，则该项目不进行缩小，其他的缩小；缩小的情况都是基于空间不足的时候，属性值设置为负数无效
4. flex-basis属性：设置在分配多余空间之前，项目在主轴占据的空间；浏览器根据此属性计算主轴是否有多余空间；属性值（auto:默认值，即项目本来的大小；固定像素数值：项目占据固定空间大小）
5. flex属性：是flex-grow,flex-shrink和flex-basis的简写；默认值：0 1 auto
6. align-self属性：设置单个项目的对齐方式，会覆盖align-items属性，默认值auto，继承父元素的属性，如果没有父元素，则等同于stretch。属性值（auto/flex-satrt/flex-end/center/baseline/stretch）