弹性盒子
弹性盒布局模型(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