CSS面试必问（四）flex布局

flex基本概念

先记住flex布局基于主轴（main axis）和侧轴（cross axis），主轴默认是水平轴，侧轴垂直于水平轴。
主轴起点（main-start），侧轴起点（cross-start）

属性：

flex-direction：是沿着主轴的排列布局，默认是水平向右

1. row:默认水平向右
2. row-reverse:水平向左
3. column:垂直向下
4. column-reverse：垂直向上

注意伸缩盒子如果nowrap则都排列在一行，宽度伸缩，所以当宽度超出屏幕时，设置的宽度则无效了，宽度开始收缩

如果所有元素都想挤在一行，就设置nowrap，宽度会自动收缩来适应窗体

flex-wrap：伸缩盒子是否卷起

nowrap：不卷起，挤在一行
wrap：卷起，多出来的开始排列在第二行
wrap-reverse：wrap反方向卷起

主轴对齐justify-content（主要用于弹性盒子里为一行）

弹性盒子的父盒子称为flexbox，子盒子称为items。

案例是flexbox里仅仅有一行items

flex-start, flex-end, center, space-between, space-around
沿主轴方向的排列

侧轴对齐align-items（主要用于弹性盒子里为一行）

flexbox里仅仅有一行items

当前行的侧轴方向排列
flex-start, flex-end, center, space-between, space-around
沿侧轴方向的排列

伸缩行对其align-content（弹性盒子里是多行）

flexbox里有多行items，当一行盛不下时

针对高度确定，高度很大，内容较小且多行，多行内容在大盒子里的整体的布局设定
flex-start, flex-end, center, space-between, space-around, stretch

items属性

order, flex-grow, flex-shrink, flex-basis, align-self
暂时没有用过这些属性，回头再详细说