一、什么是 flex 布局？
flex 布局意为"弹性布局"，用来为盒状模型提供最大的灵活性。
主要思想：给容器控制项目的宽度高度的能力，使用 flex 项目可以自动填满容器的可用空间。Flex 容器（父元素）使用 Flex 项目（子元素）可以自动放大与收缩，用来填补可用的空闲空间。
上图展示的是水平方向的 flex 容器，若 flex-direction 属性为竖直方向，则 main axis 的方向为竖直方向。
- main axis: Flex容器的主轴主要用来配置Flex项目。注意，它不一定是水平，这主要取决于
flex-direction属性。 - main-start | main-end: Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。
- main size: Flex项目的在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是
width或height属性，由哪一个对着主轴方向决定。 - cross axis: 与主轴垂直的轴称作侧轴，是侧轴方向的延伸。
- cross-start | cross-end: 伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。
- cross size: Flex项目的在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是
width或height属性，由哪一个对着侧轴方向决定。
二、容器的属性
Flex容器不是块容器，因此有些设计用来控制块布局的属片在Flexbox布局中不适用。特别是：多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。
1、display：定义一个 flex 容器，决定其为内联还是块
取值：flex（块） | inline-flex（内联）
如果元素 display 的值指定为 inline-flex，而且元素是一个浮动元素或绝对定位元素，则 display 的计算值是 flex。
2、flex-direction：创建方向轴，定义 flex 项目在 flex 容器中放置的方向。
取值：row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
3、flex-wrap：让 flex 项目多行显示
取值：nowrap（默认值）：单行显示
wrap：多行显示，第一行在上方
wrap-reverse：多行显示，第一行在下方
4、flex-flow：属性 flex-direction 和 flex-wrap 属性的简写
5、justify-content：定义项目在主轴上的对齐方式
取值：flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
6、align-items：定义项目在交叉轴上的对齐方式
取值：flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为 auto，将占满整个容器的高度。
7、align-content：定义多跟轴线的对齐方式。若只有一根轴线，则该属性不起作用。
取值：flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴
三、项目的属性
1、order：定义项目的排列顺序，数值越小排列越靠前，默认为0
2、flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
3、flex-shrink：定义项目的缩小比例，默认为1，即如果空间不足，该项目缩小
4、flex-basis：定义 flex 项目在分配多余空间之前的一个默认尺寸。默认值是 auto，即项目本来的大小。
5、flex：是 flex-grow，flex-shrink 和 flex-basis三个属性的缩写。第二个和第三个参数( flex-shrink 和 flex-basis )是可选值。其默认值是 0 1 auto。
6、align-self：允许单个项目与其他项目有不一样的对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
取值：auto | flex-start | flex-end | center | baseline | stretch;
四、实例
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Flex 布局</title> 7 <style> 8 /* basic style sheet */ 9 * { 10 box-sizing: border-box; 11 } 12 html, body { 13 height: 100%; 14 } 15 body { 16 display: flex; 17 align-items: center; 18 justify-content: center; 19 vertical-align: center; 20 flex-wrap: wrap; 21 align-content: center; 22 font-family: 'Open Sans', sans-serif; 23 background: linear-gradient(top, #222, #333); 24 } 25 [class^=box] { 26 margin: 16px; 27 padding: 4px; 28 background-color: #e7e7e7; 29 width: 104px; 30 height: 104px; 31 object-fit: contain; 32 box-shadow: inset 0 5px white, 33 inset 0 -5px #bbb, 34 inset 5px 0 #d7d7d7, 35 inset -5px 0 #d7d7d7; 36 border-radius: 10%; 37 } 38 .item { 39 display: block; 40 width: 24px; 41 height: 24px; 42 border-radius: 50%; 43 margin: 4px; 44 background-color: #333; 45 box-shadow: inset 0 3px #111, inset 0 -3px #555; 46 } 47 [class^=box] { 48 display: flex; 49 } 50 .box-1 { 51 justify-content: center; /* 项目在主轴上的对齐方式，此例中为水平方向对齐方式 */ 52 align-items: center; /* 项目在交叉轴上的对齐方式，此例中为竖直方向对齐方式 */ 53 } 54 .box-2 { 55 justify-content: space-between; 56 } 57 /* :nth-of-type(N) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素 */ 58 .box-2 .item:nth-of-type(2) { 59 align-self: flex-end; /* 定义单个项目与其他项目具有不一样的对齐方式 */ 60 } 61 .box-3 { 62 } 63 .box-3 .item:nth-of-type(2) { 64 justify-content: center; 65 align-self: center; 66 } 67 .box-3 .item:nth-of-type(3) { 68 align-self: flex-end; 69 } 70 .box-4, .box-6 { 71 justify-content: space-between; 72 } 73 .column { 74 display: flex; 75 flex-direction: column; /* 创建方向轴，column表示主轴为垂直方向，起点在上沿 */ 76 justify-content: space-between; /* 项目在主轴上的对齐方式，space-between 表示两端对齐 */ 77 } 78 .box-5 { 79 justify-content: space-between; 80 } 81 .box-5 .column:nth-of-type(2), .box-7 .column:nth-of-type(2) { 82 justify-content: center; 83 } 84 .box-8 .column:nth-of-type(2) { 85 justify-content: space-around; 86 } 87 </style> 88 </head> 89 90 <body> 91 <div class="box-1"> 92 <span class="item"></span> 93 </div> 94 95 <div class="box-2"> 96 <span class="item"></span> 97 <span class="item"></span> 98 </div> 99 100 <div class="box-3"> 101 <span class="item"></span> 102 <span class="item"></span> 103 <span class="item"></span> 104 </div> 105 106 <div class="box-4"> 107 <div class="column"> 108 <span class="item"></span> 109 <span class="item"></span> 110 </div> 111 <div class="column"> 112 <span class="item"></span> 113 <span class="item"></span> 114 </div> 115 </div> 116 117 <div class="box-5"> 118 <div class="column"> 119 <span class="item"></span> 120 <span class="item"></span> 121 </div> 122 <div class="column"> 123 <span class="item"></span> 124 </div> 125 <div class="column"> 126 <span class="item"></span> 127 <span class="item"></span> 128 </div> 129 </div> 130 131 <div class="box-6"> 132 <div class="column"> 133 <span class="item"></span> 134 <span class="item"></span> 135 <span class="item"></span> 136 </div> 137 <div class="column"> 138 <span class="item"></span> 139 <span class="item"></span> 140 <span class="item"></span> 141 </div> 142 </div> 143 144 <div class="box-7"> 145 <div class="column"> 146 <span class="item"></span> 147 <span class="item"></span> 148 <span class="item"></span> 149 </div> 150 <div class="column"> 151 <span class="item"></span> 152 </div> 153 <div class="column"> 154 <span class="item"></span> 155 <span class="item"></span> 156 <span class="item"></span> 157 </div> 158 </div> 159 160 <div class="box-8"> 161 <div class="column"> 162 <span class="item"></span> 163 <span class="item"></span> 164 <span class="item"></span> 165 </div> 166 <div class="column"> 167 <span class="item"></span> 168 <span class="item"></span> 169 </div> 170 <div class="column"> 171 <span class="item"></span> 172 <span class="item"></span> 173 <span class="item"></span> 174 </div> 175 </div> 176 177 <div class="box-9"> 178 <div class="column"> 179 <span class="item"></span> 180 <span class="item"></span> 181 <span class="item"></span> 182 </div> 183 <div class="column"> 184 <span class="item"></span> 185 <span class="item"></span> 186 <span class="item"></span> 187 </div> 188 <div class="column"> 189 <span class="item"></span> 190 <span class="item"></span> 191 <span class="item"></span> 192 </div> 193 </div> 194 </body> 195 196 </html>