flex布局各属性一览

本文转载于 https://blog.csdn.net/weixin_44251096/article/details/108844048
容器属性flex-direction
1.作用：确认主轴的作用
2.特点：把主轴确认，元素按照确认主轴方向进行排布也
3.语法：
flex-direction：row 默认值，从左到右
flex-direction: row-reverse 从右到左
flex-direction: row-column 从上到下
flex-direction: row-column-reverse 从下到上
4.默认主轴x轴方向，水平向右；侧轴y轴方向，向下

容器属性justify-content
1.作用：控制主轴上的元素各种对齐方式
2.语法：
justify-content:flex-start 默认值，从头部开始
justify-content:flex-end 从尾部开始排列
justify-content:centert 在主轴居中对齐
justify-content:space-around 平分剩余空间
justify-content:space-between 先两边贴边 在平分剩余空间

容器属性flex-wrap
1.作用：控制子元素是否换行
2.语法：flex-wrap:nowrap /默认值不换行 子项宽度加起来超过父级宽度，子项宽度会被缩小，宽度只是不生效，必须设置/
flex-wrap:wrap /换行 子项的宽度加起来超过父级宽度，换行/

容器属性align-items
1.作用：控制子项单行在侧轴（默认是y轴）上对齐方式。在子项为单项（单行）的时候使用
2.整体一行元素看成整体，设置在侧轴上的对齐方式
3.语法：
align-items:flex-start 从上到下
align-items:flex-end 从下到上
align-items:center 挤在一起居中（垂直居中）
align-items:stretch 拉伸
如果stretch未设置高度或者auto将占满整个容器高度

容器属性align-content
1.作用：设置子项在侧轴上的排列方式，并且只能作用于子项出现换行或多行的情况
2.语法：
align-content:flex-start 在侧轴头部开始排列
align-content:flex-end 在侧轴尾部开始排列
align-content:centert 在侧轴中间显示
align-content:space-around 子项在侧轴平分剩余空间
align-content:space-between 子项在侧轴先分布两边，在平分剩余空空间
align-content:stretch 子项元素高度平分父元素高度
3.容器内必须有多行的项目，该属性才能渲染出效果

项目属性flex
1.作用：子元素占有（划分）在主轴上的剩余空间
2.语法：flex:20%或者 flex:2 百分比对应1-10的数字

align-self
1.作用：控制子项，在即在侧轴上的对齐方式
2.特点：
默认值为auto，父级设置了align-items,auto继承父级元素上设置侧轴的对 齐方式，如果父级元素没有设置align-items属性，auto默认值会变成stretch
3语法：
align-self:flex-start 默认值，从上到下
align-self:flex-end 从下到上
align-self:center 挤在一起居中
align-self:stretch 拉伸
4.align-self默认值为auto，表示继承父元素的align-items属性
如果父级没有设置align-item，align-self的默认值auto为stretch