本网站可以通过分类和标签帮助你快速筛选出你想看的文章，记住地址：www.Facec.cc

css中的flex布局

王丰 2022-08-20 14:31:08 897次浏览 0次留言

CSS

1. 给父元素设置：display:flex;

2. 设置主轴方向：flex-direction:row; (row x轴，column y轴)

3. 设置主轴子元素排列方式：justify-content:center;

4. 设置子元素是否换行：flex-wrap:nowrap/wrap;

//flex中，默认是不换行的所以，要用到flex-wrap属性

5. 设置侧轴子元素排列方式(单行)：align-items:center;

6. 设置侧轴子元素排列方式（多行）：align-content:

7.子元素所占份数，属性flex:0,1,2

占用剩余空间的份数，加入子元素不设置宽度，那么子元素平分100%

小知识

flex-flow 属性是flex-direction flex-wrap的复合属性
flex-flow: column wrap;
flex-flow: row wrap;

# css

评论

资源

140

分类

12

标签

40

关注我