一、flex布局是什么?
flex(是flexible box 的缩写)是“弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 flex 布局。
.box { display: flex; }
行内元素也可以使用 felx 布局。
.box { display: inline-flex; }
对于Webkit 内核的浏览器(Safari内核,Chrome内核原型,它是苹果公司自己的内核),必须加上-webkit 前缀。
.box { display: -webkit-flex; /* Safari */ display: flex; }
注意:
设为某容器为 flex 布局后,其子元素的float、clear 和 vertical-align 属性将失效。
二、基本概念
采用flex 布局的元素,称为 flex 容器(flex container),简称容器。它的所有子元素自动称为容器成员 (container item),简称 “项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置(与边框的交叉点)叫做main start
主轴结束位置(与边框的交叉点)叫做main end
交叉轴的开始位置叫做cross start
交叉轴的结束位置叫做cross end
项目默认沿主轴