CSS Flex布局
2018-06-01 本文已影响7人
PaulLuv
1. Flex布局
Flex是Flexible Box 的缩写，意为弹性布局。
任何一个容器都可以指定为Flex布局：
.box{
display: flex;
}
行内元素也可以使用Flex布局：
.box{
display: inline-flex;
}
暂时不明白的点：
Webkit的内核浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex; }
2. 基本概念
采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员，称为Flex项目（flex item）。
image.png
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫main size，占据的交叉空间叫做cross size。
3.容器的属性
容器有6个属性：
flex-direction: // 确定主轴的方向(即flex item的排列方向)。
flex-wrap: // 确定换行的方式。
flex-flow：// flex-direction与flex-wrap的简写，默认值 row nowrap.
justify-content: // 确定flex item在主轴上的对齐方式。
align-items: // 确定flex item在垂直的交叉轴上对齐方式。
align-content: // 确定多根轴线的对齐方式。如果只有一根轴线，该属性不起作用。
3.1 flex-direction：主轴的方向
row(默认值): 主轴为水平方向，从左到右排列，所有 flex item 排成一行，默认宽度不够时，会撑大宽度。
column: 主轴方向为垂直方向，从上到下排列，所有item排成一列。
row-reverse： 主轴为水平方向，从右到左排列，所有 flex item 排成一行，默认宽度不够时，会撑大宽度。
column-reverse：主轴方向为垂直方向，从下到上排列，所有item排成一列。
3.2 flex-wrap：一条轴线放不下时，如何换行
nowrap（默认值） ：不换行。
wrap： 换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
这里说明一下，如果主轴方向为垂直方向，设置wrap与wrap-reverse其实没有多大意义，我测试了一下，设置为wrap是flex item 在左边，从上到下一列。设置为wrap-reverse就变为右边了，也是一列。主要原因是当超出屏幕显示的高度时，会有滑动条出现，增大容器的高度。如果指定容器的高度，换行则是左右了。
3.3 flex-flow
flex-flow是 flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
3.4 justify-content：定义flex item在主轴上的对齐方式
flex-start(默认)：左对齐
flex-end： 右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：两个item两侧的间隔相等。
3.5 align-items： 定义flex item在交叉轴上如何对齐
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：flex item的第一行文字的基线对齐。
stretch(默认值)：如果flex item未设置高度，或者设置为auto，将占满整个容器的高度。
3.6 align-content：定义多根轴线的对齐方式，如果只有一根轴线，该属性不生效
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
4. flex item的属性
order：定义item的排列顺序。默认为0，数值越小，排列越考前。
flex-grow：item的权重，即放大比例。默认为0，即存在剩余空间也不放大。
flex-shrink：item的缩小比例。默认为1，即如果空间不足，将缩小。 如果所有的item的flex-shrink都为1，当空间不足时，将等比例缩小。负值对该属性无效。flex-shrink为0时，将不缩小。
flex-basis：定义分配多余空间之前，item占据主轴的空间。默认值为auto，即本身的大小。可以设置为跟width或height一样的值，即item将占据固定空间。
flex：是flex-grow，flex-shrink和flex-basis的简写，默认值为 0 1 auto。 两个快捷键 auto（1 1 auto）和none（0 0 auto）。
align-self：允许单个item与其他项目有不一样的对齐方式，可以覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
