Flex布局(弹性布局)
一、容器的六个属性:
1、flex-direction :决定主轴 项目排列方向
row:主轴为水平方向,起点在左端
row-reverse :主轴为水平方向,起点在右端
column:主轴为垂直方向,起点在上沿
column-reverse:主轴为垂直方向,起点在下沿
2、flex-wrap属性:决定项目是如何换行
nowrap:不换行
wrap:换行,第一行在上方
wrap-reverse:换行,第一行在下方
3、flex-flow属性:上面两个属性的默认属性的简写模式(默认为row nowrap)
flex-flow: <flex-direction> || <flex-wrap>;
4、justify-content属性:定义项目在主轴上的对齐方式
flex-start:左对齐(默认)
flex-end :右对齐
center:居中
space-between:两端对齐,项目之间的间隔相等
space-around:每个项目两侧的间隔相等。
5、align-items属性:定义项目在交叉轴上如何对齐
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch:未设置或为auto,将占满整个容器的高度
6、align-content属性:多跟轴线的对齐方式
flex-start:与交叉轴的起点对齐
flex-end: 与交叉轴的终点对齐
center: 与交叉轴的终点对齐
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布
space-around:每根轴线两侧的间隔相等
stretch:轴线占满整个交差轴
二、项目的属性:
1、order属性
定义项目的排列顺序。数值越小越靠前
2、flex-grow属性
定义项目的放大属性
3、flex-shrink属性
定义项目的缩小属性
4、flex-basis属性
定义在分配空间之前,项目占据的主轴空间,浏览器根据这个属性来计算主轴是否有多余空间,默认auto
5、flex属性
是前面234属性的简写,默认 0 1 auto
6、align-self属性
允许单个项目与其他项目有不同的对齐方式,可覆盖父元素的align-items属性。默认auto,表示继承父类属性