前端面试题--详解flex

前端面试题–详解flex

Flex是指弹性盒子布局的意思
Flex的主要作用是：解决元素居中问题，自动弹性伸缩，自动适配不同大小的屏幕和移动端。
Flex的术语解释：二成员：容器和项目(container / item)
二根轴：主轴与交叉轴(main-axis / cross-axis)
二根线：起始线(main/cross-start)与结束线（main/cross-end)
容器container的属性设置：

1. flex-direction 主轴方向
2. flex-wrap 主轴一行满了换行
3. flex-flow 1和2的组合
4. justify-content 主轴元素对齐方式
5. align-items 交叉轴元素对齐方式//单行
6. align-content 交叉轴行对齐方式//多行

Flex-direction主轴方向
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。