弹性盒子的概念

弹性盒子

弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的⼀种新的布局方式。

 

采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称 为flex项目（flex item），简称“项目”。

注意：设为flex布局以后，子元素的float、clear和vertical-align属性将失效。

 

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框 的交叉点）叫做 main start （主轴起始），结束位置叫做 main end （主轴结束）；

交叉轴的开始位 置叫做 cross start （交叉轴起始），结束位置叫做 cross end （交叉轴结束）。 项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size