flex布局中存在两个重要的概念,一个是轴,一个是容器
轴
image.png如上图所示,轴又分为主轴和交叉轴两个部分。
- 主轴
justify-content属性决定了子容器沿着主轴的排列方向,而主轴的方向又是有flex-direction属性决定的。
主轴的开始端由flex-start表示,结束端由flex-end表示。 - 交叉轴
【交叉轴方向为从左到右或者从上到下】,起始端由flex-start表示,结束端由flex-end表示
因此当flex-direction定下的时候,主轴与交叉轴的方向就已经确定下来了。
flex-direction总共有4个值 - row,默认值,从左向右
- column,从上向下
- row-reverse,从右向左
- column-reverse,从下向上
容器
容器存在这样的特点,父容器可以设置子容器的排列方式,子容器也可以设置自己的排列方式,如果子容器设置了则以子容器为准。
- 父容器
- 设置子容器沿主轴排列【justify-content】
【flex-start】起始端对齐
【center】居中
【flex-end】末尾端对齐
【space-around】首尾的间距是其他的一半
【space-between】首尾与父容器相切 - 设置子容器沿交叉轴排列【align-items】
【flex-start】起始端对齐
【flex-end】末尾端对齐
【center】居中
【baseline】沿着首行文字的基线对齐
【stretch】沿着交叉轴方向拉伸至于父容器高度相同
- 子容器
在主轴上如何伸缩【flex】
在交叉轴上如何排列【align-self】,与align-items一致,只不过是在子容器上设置
flex进阶
- 父容器
- 设置换行【flex-wrap】
【wrap】
【nowrap】
【wrap-reverse】逆序换行,指的是沿着交叉轴的反方向换行 - 轴向与换行的复合属性【flex-flow=flex-direction+flex-wrap】
【row wrap】
【column nowrap】 - 设置多行沿交叉轴的对齐方式【align-content】
【flex-start】起始端对齐
【center】居中
【flex-end】末尾端对齐
【space-around】均匀分布
【space-between】首尾两端相切
【stretch】拉伸对齐
- 子容器
- 设置基准大小【flex-basis】,主轴为横向时代表宽度,主轴为纵向时代表高度
- 设置扩展比例【flex-grow】,在flex-basis的基础上,剩余部分按照比例分
- 设置收缩比例【flex-shrink】,在flex-basis的基础上,超出部分按照比例收缩
- 设置子容器顺序【order】,默认值为0,可以为负值,值越小排越前
网友评论