flex布局原理
采用flex布局的元素,称为flex容器。它的所有子元素自动成为容器成员,称为flex项目。
flex布局就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式。
(这句话很重要,注意理解,实际应用用得上)
常见父项属性
属性 | 属性值 | 作用 |
---|---|---|
flex-direction | row/row-reverse/column/column-reverse | 设置主轴的方向 |
flex-wrap | nowarp/warp | 设置子元素是否换行 |
flex-flow | 略 | 是flex-direction和flex-wrap的简写属性 |
justify-content | flex-start/flex-end/center/space-around/space-between | 设置主轴上的子元素排列方式 |
align-items | flex-start/flex-end/center/stretch/baseline | 设置侧轴上的子元素排列方式(单行) |
align-content | flex-start/flex-end/center/stretch/space-around/space-between | 设置侧轴上的子元素排列方式(多行) |
注意:多行的意思是“换行”形成的多行
常见子项属性
属性 | 属性值 | 作用 |
---|---|---|
flet | (数字,如1,2,3) | 定义子项目分配剩余空间,用flex来表示占多少份数 |
align-self | flex-start/flex-end/center/stretch/baseline | 控制子项自己在侧轴上的排列方式 |
order | (数字,如1,2,3) | 定义项目的排列顺序。数字越小排列越靠前,默认为0 |