vue⾃定义html布局，前端-VUE-页⾯布局-flex布局整理-傻⽠教
学
1.flex-direction：设置容器内部元素的排列⽅向
row: 定义排列⽅向 从左到右
row-reverse: 从右到左
column: 从上到下
column-reverse: 从下到上
图⽚介绍
flex-direction:row
flex-direction:row-reverse
flex-direction:column
flex-direction:column-reverse
2.flex- ：定义 flex 容器
nowrap: 不换⾏
wrap: 换⾏
wrap-reverse: 逆向换⾏
html的flex布局图⽚介绍
flex-wrap: wrap;(容器有⾼度则下⼀⾏平分⾼度)
flex-wrap: nowrap;(已经压缩元素)
flex-wrap: wrap-reverse;(容器有⾼度则下⼀⾏平分⾼度)
3.justify-content：设置元素在主轴上的对其⽅式
flex-start: (默认)左对齐 或者 向上对齐
flex-end: 右对齐 或者 向下对齐
center: 居中对齐
space-between: 两端对齐，元素之间平均等分剩余空⽩间隙部分
space-around: 元素两边平均等分剩余空⽩间隙部分，最左(上)或最右(下)和
元素之间距离是 1:2
图⽂介绍
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
4.align-items：设置容器中元素在交叉轴上的对齐⽅式
图⽚介绍(主轴为 row)
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;
5.align-content：当轴线超过1条的时候，flex容器可以把多条轴线视为元素对待，
可以进⾏对齐
图⽚介绍(主轴从上到下)
align-content: center;
align-content: flex-start;
align-content: flex-end;
align-content: stretch;
align-content: space-between;
align-content: space-around;
6.成员项的属性
order：成员排列顺序
Fle-grow:⽤于设置元素的放⼤⽐例，默认为 0(撑满主轴剩余)
Flex-shrink：控制元素⽐例缩⼩(主轴满了为前提)
Flex-basis：设置元素固定或者⾃动空间的占⽐(对⾃⼰本⾝进⾏操作)
align-self：重写容器中元素在交叉轴上的对齐⽅式
————————————————
版权声明：本⽂为CSDN博主「偏偏潇洒程序猿」的原创⽂章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原⽂出处链接及本声明。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。