FLEX布局

FLEX布局

Flex布局

​​Flex​​布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持。

基础

通过指定​​display: flex​​​来标识一个弹性布局盒子，称为​​FLEX​​​容器，容器内部的盒子就成为​​FLEX​​​容器的成员，容器默认两根轴线，水平的主轴与垂直的交叉轴，主轴的开始位置叫做​​main start​​​，结束位置叫做​​main end​​​；交叉轴的开始位置叫做​​cross start​​​，结束位置叫做​​cross end​​，容器成员默认按照主轴排列。

容器属性

flex-direction

​​flex-direction​​​属性决定主轴的方向，取值为​​row | row-reverse | column | column-reverse​​。

​​row​​默认值：主轴为水平方向，起点在左端。​​row-reverse​​​：主轴为水平方向，起点在右端，容器成员顺序与​​row​​顺序相反。​​column​​：主轴为垂直方向，起点在上沿。​​column-reverse​​​：主轴为垂直方向，起点在下沿，容器成员顺序与​​column​​顺序相反。