弹性布局
display:flex;
弹性布局改变容器内部的布局方式:从流式布局 —> flex布局
主轴:默认为盒子水平方向,可以通过属性改变主轴方向。
交叉轴:与主轴垂直的即是交叉轴。
属性
flex-direction:容器内项目的排列方向(默认横向排列)
row 水平排列(左 —> 右)
row-reverse 水平排列(右 —> 左)
column 垂直排列(上 —> 下)
column-reverse 垂直排列(下 —> 上)
initial 设置该属性的默认值
inherit 从父元素继承该属性
flex-wrap:容器内项目换行方式
nowrap 规定灵活的项目不拆行或不拆列
wrap 规定灵活的项目在必要的时候拆行或拆列
wrap-reverse 在必要的时候拆行或拆列,但是以相反的顺序
initial 设置该属性的默认值
inherit 从父元素继承该属性
flex-flow:以上两个属性的简写方式
justify-content:项目在主轴上的对齐方式
flex-start 项目位于容器的开头
flex-end 项目位于容器的结尾
center 项目位于容器的中心
space-between 项目位于各行之间留有空白的容器内
space-around 项目位于各行之前、之间、之后都留有空白的容器内
initial 设置该属性的默认值
inherit 从父元素继承该属性
align-items:目在交叉轴上如何对齐
flex-start 项目位于容器的开头
flex-end 项目位于容器的结尾
center 项目位于容器的中心
baseline 与子元素中的文字有关,根据每个子元素中第一行文字的位置,决定每个子元素对齐方式
stretch 默认值,元素被拉伸以适应容器
align-content:定义了多根轴线的对齐方式,如果项目只有一根轴线,不起作用
flex-start 项目位于容器的开头
flex-end 项目位于容器的结尾
center 项目位于容器的中心
space-between 项目位于各行之间留有空白的容器内
space-around 项目位于各行之前、之间、之后都留有空白的容器内