CSS——Flex弹性盒模型

Flex弹性盒模型
　　flex布局，可以简便、完整、响应式地实现各种页面布局。
　　采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 子项（项目）（flex item）
划分：
　　作用在flex容器上: 　　 
　　　　flex-direction 
　　　　flex-wrap 
　　　　flex-flow 
　　　　justify-content 
　　　　align-items 
　　　　align-content 

　　作用在flex子项上:

　　　　order
　　　　flex-grow
　　　　flex-shrink
　　　　flex-basis
　　　　flex
　　　　align-self

　　设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
　　容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
　　主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
　　项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

一、作用在flex容器上的CSS属性
　　flex-direction:
　　　　flex-direction用来控制子项整体布局方向，是从左往右，还是从右往左，是从上到下，还是从下到上
　　　　取值： 　　　　 　　　　　　 含义:
　　　　row 　　　　 　　 　  默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左到右。
　　　　row-reverse 　　　　 显示为行。但方向和row属性值是相反的。
　　　　column 　　　　　　 显示为列
　　　　column-reverse 　　  显示为列，但方向和column是相反的。

　　flex-wrap:
　　　　flex-wrap用来控制子项整体单行显示还是换行显示
　　　　取值 　　　　　　　　　　　　 含义
　　　　nowrap 　　　　　　   默认值，表示单行显示，不换行
　　　　wrap 　　　　　　　   宽度不足换行显示
　　　　wrap-reverse 　　　　 宽度不足换行显示，但是是从下往上开始的，也就是原本换行在下面的子项现在跑到上面。

　　flex-flow:
　　　　flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。
　　　　第一个值表示方向，第二个值表示换行，中间用空格隔开。

　　justify-content:
　　　　justify-content属性决定了主轴方向（左右方向）上子项的的对齐和分布方式。
　　　　取值 　　　　　　　　　　　　 含义
　　　　flex-start 　　　　 默认值，表现为起始位置对齐。
　　　　flex-end 　　　　     表现为结束位置对齐
　　　　center 　　　　　　 表现为居中对齐
　　　　space-between 　　 表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
　　　　space-around 　　 around是环绕的意思。意思是每个flex子项两侧都环绕各不相干的等宽的空白间距，最终视觉上边缘的两侧的空白只有中间空白的一半
　　　　space-evenly 　　 evenly是匀称，平等的意思。也就是视觉上每个flex子项的两侧空白间距完全相等。

　　align-items
　　　　align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。
　　　　align-items属性定义项目在交叉轴（交叉轴从上到下）上如何对齐。
　　　　取值 　　　　　　　　　　　　 含义
　　　　flex-start 　　　　　　　　 交叉轴的起点对齐，即容器顶部对齐。
　　　　flex-end 　　　　　　　　 交叉轴的终点对齐，即容器底部对齐。
　　　　center 　　　　　　　　　　 交叉轴的中点对齐，即垂直居中对齐。
　　　　baseline 　　　　　　　　 项目的第一行文字的基线对齐
　　　　stretch 　　　　　　 如果项目未设置高度或设为auto，那么flex子项拉伸，将占满整个容器的高度（默认值）

　　align-content
　　　　align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的
　　　　align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
　　　　取值　　　　　　　　　　　　　　 含义
　　　　flex-start： 　　　　　　　　　　 与交叉轴的起点对齐，即起始位置对齐。
　　　　flex-end： 　　　　　　　　　　 与交叉轴的终点对齐，即结束位置对齐。
　　　　center： 　　　　　　　　　　　　 与交叉轴的中点对齐，即居中对齐。
　　　　space-between： 　　　　　　 与交叉轴两端对齐，轴线之间的间隔平均分布，即两端对齐。
　　　　space-around：　　　　　　 每根轴线两侧的间隔都相等，即每一行元素上下都享有独立不重叠的空白空间。
　　　　stretch： 　　　　 默认值，轴线占满整个交叉轴。每一个flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%

二、作用在flex子项上的CSS属性
　　order：
　　　　可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值是0。
　　flex-grow：
　　　　属性中的grow是扩展的意思。扩展的就是flex子项的所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空间间隙，默认值为0，值在0~1
　　flex-shrink：
　　　　属性中shrink是收缩的意思，flex-shrink主要处理当flex容器空间不足时候，单个元素的收缩比例。默认值为1，0表示不收缩
　　flex-basis：
　　　　flex-basis定义了分配剩余空间之前元素的默认大小，给定的是固定值，而不是比例尺。
　　flex：
　　　　flex属性是flex-grow,flex-shrink,flex-basis的缩写
　　align-self：
　　　　align-self指控制单独某一个flex子项的垂直对齐方式