移动端之flex布局——包括：flex布局父元素的常见属性（flex-direction、justify-content、flex-wrap、align-items等）和子项常见的属性（flex等）

flex布局概述

• flex用来为盒状模型提供最大的灵活性，并且任何一个容器都可以指定flex布局。
• 指定了flex布局的元素，不管是行内元素还是块级元素，都可以设置宽度和高度。
• flex布局就是通过给父盒子添加flex属性来控制子盒子的位置和排列方式。
• 为父盒子设定flex布局以后，子元素的float、clear和vertical-align属性都将失效。
• 采用flex布局的元素，称为flex容器，简称“容器”；而它的所有子元素自动成为容器成员，成为flex项目，简称“项目”。

flex布局父元素常见的属性

• flex-direction：设置主轴的方向
• justify-content：设置主轴上子元素的排列方式
• flex-wrap：设置子元素是否换行
• align-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素的排列方式（单行）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

1.flex-direction

• flex-direction属性决定主轴的方向（即项目的排列方向）。

属性值	说明
row	默认值，从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

2.justify-content

• justify-content属性定义了项目在主轴上的对齐方式。

属性值	说明
flex-start	默认值，从头部开始（如果主轴是X轴，则从左到右）
flex-end	从尾部开始
center	在主轴居中对齐（如果主轴是X轴，则水平居中）
space-around	平分剩余空间
space-between	先两边贴边，再平分剩余空间

3.flex-wrap

• flex-wrap属性定义项目是否换行。

属性值	说明
nowrap	默认值，不换行
wrap	换行

4.align-items(单行)

• align-items属性控制子项在侧轴上的排列方式，在子项是单行的时候使用。

属性值	说明
flex-start	默认值，从上到下
flex-end	从下到上
center	在侧轴上居中对齐
stretch	拉伸，（如果侧轴是y轴，子元素不能设置高度；如果侧轴是X轴，则子元素不能设置宽度）

5.align-content(多行)

• align-content属性设置子项在侧轴上的排列方式，并且只能是子项是多行的时候使用，在单行下是没有效果的。

属性值	说明
flex-start	默认值，在侧轴的头部开始排列
flex-end	在侧轴的尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两头，再平分剩余空间
stretch	平分父元素的高度给子元素

6.flex-flow

• flex-flow属性是flex-direction和flex-wrap属性的复合属性。

flex-flow的语法格式如下：
flex-flow: row wrap;

flex布局子项常见属性

• flex：子项目所占的份数
• align-self：控制子项自己在侧轴的排列方式
• order：定义子项的排列顺序（前后顺序）

1.flex

• flex属性定义子项目分配剩余空间，用flex来表示占多少份数。

flex属性的语法格式如下：
.first {
	flex: ;    /*默认值是0*/
}

2.align-self

• align-self属性允许单个项目与其他项目有不一样的对齐方式，可覆盖align-items属性。
• align-self属性的默认值是auto，表示继承父元素的align-items属性，而如果没有父元素，则等同于stretch。
• align-self属性的取值和align-items几乎一样。

3.order

• order属性定义项目的排列顺序，数值越小，排列越靠前，默认值为0。（注意：和z-index是不一样的）

---

微信公众号也会定期更新，觉得文章写得还可以的，可以加个关注！点个赞！谢谢！