flex布局
基本概念
- Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
- 老版本我们通常称为box;
- 新版本我们成为flex;
- Webkit 内核的浏览器,必须加上-webkit前缀。
//老版本
display: -webkit-box;
//新版本
display:flex;
- 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
- 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
- 主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
- 交叉轴的开始位置叫做cross start,结束位置叫做cross end。
- 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
flex属性
容器上的属性
老版本容器属性
容器的布局方向: -wibkit-box-orient属性改变主轴哪一根;
- horizontal 指定子元素在一个水平线上从左至右排列;
- vertical 从顶部向底部垂直布置子元素;
- (略)inline-axis 子元素沿着内联坐标轴(映射到横向);
- (略)block-axis 子元素沿着块坐标轴(映射到垂直);
- (略)inherit box-orient 属性的值应该从父元素继承 ;
容器的排列方向: -wibkit-box-direction改变了主轴的方向;
- normal 以默认方向显示子元素。
- reverse 以反方向显示子元素。
- inherit 应该从子元素继承 box-direction 属性的值;
富裕空间的管理
- box-pack
- start 对于普通方向的boxes,左边缘的第一个子元素被放置在左侧(所有额外的空间放置后的最后一个子元素)。对于反向boxes,右边缘最后一个子元素放置在右侧(所有额外的空间放置前的第一个子元素);
- end 对于正常的方向的boxes,最后一个子元素的右边缘放置在右侧(所有额外的空间放置前的第一个子元素)。对于反向boxes,第一个孩子的左边缘放置在左侧(所有额外的空间放置后的最后一个子元素);
- center 额外的空间划分均匀的两半,前一半放置第一个子元素,另一半放置最后一个子元素;
- justify 额外的空间平均分配给每个子元素
- box-align
- box-pack