容器属性
-
align-content- 该属性可选值与justify-content一样,区别是justify-content控制的是
一根主轴的情况(一行),align-content控制的是多根主轴的情况- 使用该属性的容器必须有多行子元素
- 必须允许换行(flex-wrap:wrap)
- 该属性是负责容器内所有轴垂直排列
- 当flex-direction为column时 该属性负责所有轴的横向排列
- 和把元素竖起来排列不同的是,该属性可以在管理竖向排列的同时管理每行多个元素横向排列,这是column排列做不到的
- 可以和align-items属性配合使用做到内容单行，多行不同布局
- 该属性可选值与justify-content一样,区别是justify-content控制的是
-
justify-content- 横向排列子元素 作用在每行的每根纵轴上
-
align-items- 纵向排列子元素 作用在每根横轴(每行)上
-
felx-direction- 元素排序方式 横或竖,对应的轴也会更改
-
flex-wrap- 是元素可以换行,换行后就会有多根横轴,此时需要使用aligin-content来管理所有的横轴
项目属性
-
order- 值越靠前的排名越前
-
align-self- 该属性是负责当前项在当前主轴的垂直排列
-
flex- 当前项占据所有项的百分比
网友评论