flex布局

一、常见父项属性

1、flex-direction（row（默认）、column、row-reverse、column-reverse） ：设置主轴的方向

2、justify-content （flex-start（默认）、flex-end、center、space-around、space-between（常用））： 设置主轴上的子元素排列方式

3、 flex-wrap（wrap、nowrap）： 设置子元素是否换行

4、align-content（有换行才有效，flex-start（默认）、flex-end、center、space-around、space-between（常用）、stretch）： 设置侧轴上的子元素的排列方式（多行）

5、align-items（flex-start（默认）、flex-end、center、stretch）： 设置侧轴上的子元素排列方式（单行）

6、flex-flow（例子： flex-flow：column wrap）：复合属性，相当于同时设置了flex-direction和flex-wrap

二、常见子项属性

1、flex（定义子项目分配剩余空间） 子项目占的份数

2、align-self 控制子项自己在侧轴的排列方式

3、order属性定义子项的排列顺序（前后顺序，数值越小越靠前，默认是0，所以如果要动一个设置-1就可以）

补充 css选择器

section div：nth-child（3）{}   （选择section中的第三个div设置css样式）

最后

以上就是机智冬天为你收集整理的flex布局的全部内容，希望文章能够帮你解决flex布局所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。