flex布局 js基础

最新推荐文章于 2024-04-30 16:57:21 发布

VIP文章李柒恙

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量1.5k

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/haisyn/article/details/126372878

版权

flex布局

display：flex；弹性盒子

1）flex-direction 调整主轴方向

row                 行排布
row-reverse         同一行反向排布
column              列排布
column-reverse      同一列反向排布

2）justify-content 主轴子元素排列

flex-start          从头部排列
flex-end            从尾部排列
center              居中排列
space-around        平分剩余
space-between       两边贴边，平分剩余

3）align-items 侧轴方向，子元素的排列

flex-start          从上到下
flex-end            从下到上
stretch             拉伸（子元素去掉高度）
center              居中

4）flex-wrap属性子元素是否换行

wrap    换行
no-wrap    不换行

5）flex-flow 属性：复合属性，flex-direction和flex-wrap

flex-flow:row-wrap

6）align-content属性子元素整体，在父元素中的对齐方式

flex-start      侧轴头部排列
flex-end        侧轴尾部排列
center

关注