display：flex 容器与项目属性

容器的属性：

1.flex-direction：用于控制项目排列方向与顺序

2.flex-wrap：用于控制项目是否换行

3.flex-flow：flex-deriction与flex-wrap属性的简写集合，属性值之间用空格分隔

4.justify-content：用于控制项目在主轴的对齐方式

5.align-items：用于控制项目在交叉轴的对齐方式

6.align-content：用于控制多行项目的对齐方式

项目的属性：

1.align-self：定义单个项目不一样的对齐方式，可覆盖align-items属性，默认值为auto。

2.order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。

3.flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

4.flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

5.flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

6.flex-basis：定义项目占据主轴空间的大小，默认为auto，即项目的本来大小。

容器属性详细内容：

1、flex-direction: 用于控制项目排列方向与顺序

它可能有4个值。

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

2、flex-wrap: 用于控制项目是否换行

它可能有3个值。

• nowrap：默认值，表示不换行
• wrap：换行，第一行在下方
• wrap-reverse：换行，第一行在下方

3、flex-flow：flex-direction和flex-wrap的简写形式，默认值为row nowrap。

如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

4、justify-content：用于控制项目在主轴的对齐方式

它可能取6个值。

• flex-start（默认值）：与主轴起点对齐
• flex-end：与主轴终点对齐
• center： 居中对齐
• space-between：项目两侧紧贴容器，项目之间的间隔相等
• space-around：项目两侧的间隔相等，项目之间间距为项目两侧与容器间隔的2倍
• space-evenly：项目两侧、项目之间的间隔相等

假设主轴为从左到右：

假设主轴为从上到下：

5、align-items：用于控制项目在交叉轴上的对齐方式

它可能取5个值。与主轴垂直相交的即为交叉轴

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
• flex-start：与交叉轴起点对齐
• flex-end：与交叉轴终点对齐
• center：居中
• baseline: 项目的第一行文字的基线对齐

注意：justify-content与align-items默认分别处理项目横轴、纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。

6、align-content：用于控制多行项目的对齐方式，如果只有一行，该属性不起作用

该属性可能取8个值。

• stretch（默认值）：与align-items属性表现一致
• flex-start：与align-items属性表现一致
• flex-end：与align-items属性表现一致
• center：与align-items属性表现一致
• space-between：与justify-content保持一致
• space-around：与justify-content保持一致
• space-evenly：与justify-content保持一致
• baseline: 与align-items属性表现一致

 容器属性详细内容：

1.align-self：定义单个项目不一样的对齐方式，可覆盖align-items属性，默认值为auto。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

• auto: 继承父元素的align-items属性，如果没有父元素，则等同于stretch
• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
• flex-start：与交叉轴起点对齐
• flex-end：与交叉轴终点对齐
• center：居中
• baseline: 项目的第一行文字的基线对齐

2.order：定义项目的排列顺序。数值越小，排列越靠前，默认为0。

3.flex：是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

4.flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

5.flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

6.flex-basis：定义项目占据主轴空间的大小，默认为auto，即项目的本来大小。

1. flex-basis 属性设置在项目上的。
2. flex-basis 不全等于width，主轴方向纵向时，可为height。
3. flex-basis 优先级比 width / height 更高。
4. 项目的大小超出容器的大小，那么会缩小到容器范围内。

部分图片来源此文章：

玩转微信小程序布局，display flex布局详细教程 | 微信开放社区