display: flex 布局终极大法

一、使用须知

1、本文整理自网上的一个flex属性练习小游戏；

2、除 order 和 align-self 属性是写在子元素上的，其他都是写在容器元素上的；

3、容器元素必须有 display: flex; 属性；

二、flex大法好

1.justify-content（横向对齐）

• flex-start：元素与容器的左端对齐；
• flex-end：元素与容器的右端对齐；
• center：元素在容器里横向居中；
• space-between：元素之间保持相等距离；
• space-around：元素周围保持相同距离；

2.align-items（纵向对齐）

• flex-start：元素与容器顶部对齐；
• flex-end：元素与容器底部对齐；
• center：元素纵向居中；
• baseline：元素在容器基线位置显示；
• stretch：元素被拉伸以及填充整个容器；

3.align-self（用在子元素上，取值与 align-items 一样，覆盖 align-items 的属性）

4.order（用在子元素中，调整单个元素的位置）

• 默认值为0；

5.flex-direction（排列方向）

• row：与文字方向一致；
• row-reverse：与文字方向相反；
• column：元素从上到下排列；
• column-reverse：迅速从下到上排列；

6.flex-wrap（是否换行）

• nowrap：所有元素都在一行；
• wrap：元素自动换行；
• wrap-reverse：逆序多行，以右下角为起点；

7.flex-flow（flex-direction 与 flex-wrap 的缩写属性）

• 例：flex-flow:row wrap;

8.align-content（纵向多行对齐，可以用来决定行间距）

• flex-start：多行集中在顶部；
• flex-end：多行集中在底部；
• center：多行居中；
• space-between：行与行之间保持相等距离；
• space-around：每行周围保持相等距离；
• stretch：每行被拉伸已填满整个容器；