CSS3 Flex Container
父元素（容器）
通过将 display 属性设置为 flex，flex 容器将可伸缩：
1
2
3
实例
<!DOCTYPE html><html><head><style>.flex-container {display: flex;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;margin: 10px;padding: 20px;font-size: 30px;}</style></head><body><div class="flex-container"><div>1</div><div>2</div><div>3</div></div><p>弹性布局中必须有一个 <em>display</em> 属性设置为 <em>flex</em> 的父元素。</p><p>弹性容器的直接子元素会自动成为弹性项目。</p></body></html>
以下是 flex 容器属性：
flex-direction 属性
flex-direction 属性定义容器要在哪个方向上堆叠 flex 项目。
1
2
3
column 值设置垂直堆叠 flex 项目（从上到下）：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;flex-direction: column;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>flex-direction 属性</h2><p>"flex-direction: column;" 垂直堆叠弹性项目（从上到下）：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
column-reverse 值垂直堆叠 flex 项目（但从下到上）：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;flex-direction: column-reverse;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>flex-direction 属性</h2><p>"flex-direction: column-reverse;" 垂直堆叠弹性项目（但是从下到上）：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
row 值水平堆叠 flex 项目（从左到右）：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;flex-direction: row;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>flex-direction 属性</h2><p>"flex-direction: row;" 水平地并排弹性项目（从左到右）：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
row-reverse 值水平堆叠 flex 项目（但从右到左）：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;flex-direction: row-reverse;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>flex-direction 属性</h2><p>"flex-direction: row-reverse;" 水平地并排弹性项目（但是从右向左）：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
flex-wrap 属性
flex-wrap 属性规定是否应该对 flex 项目换行。
下面的例子包含 12 个 flex 项目，以便更好地演示 flex-wrap 属性。
1
2
3
4
5
6
7
8
9
10
11
12
wrap 值规定 flex 项目将在必要时进行换行：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;flex-wrap: wrap;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>flex-wrap 属性</h2><p>"flex-wrap: wrap;" 规定 flex 项目将在必要时进行换行：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div><p>尝试改变浏览器的大小。</p></body></html>
nowrap 值规定将不对 flex 项目换行（默认）：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;flex-wrap: nowrap;background-color: DodgerBlue;}.flex-container>div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>flex-wrap 属性</h2><p>"flex-wrap: nowrap;" 规定将不对 flex 项目换行（默认）：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div><p>请尝试调整浏览器窗口的尺寸。</p></body></html>
wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;flex-wrap: wrap-reverse;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>flex-wrap 属性</h2><p>"flex-wrap: wrap-reverse;" 规定弹性项目将以相反的顺序换行（如有必要）：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div><p>尝试改变浏览器的大小。</p></body></html>
flex-flow 属性
flex-flow 属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;flex-flow: row wrap;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>flex-flow 属性</h2><p>flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写属性。</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div><p>请尝试调整浏览器窗口的大小。</p></body></html>
justify-content 属性
justify-content 属性用于对齐 flex 项目：
1
2
3
值将 flex 项目在容器的中心对齐：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;justify-content: center;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>justify-content 属性</h2><p>"justify-content: center;" 在容器中央对齐弹性项目：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
flex-start 值将 flex 项目在容器的开头对齐（默认）：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;justify-content: flex-start;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>justify-content 属性</h2><p>"justify-content: flex-start;" 在容器开头对齐弹性项目（默认）：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
flex-end 值将 flex 项目在容器的末端对齐：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;justify-content: flex-end;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>justify-content 属性</h2><p>"justify-content: flex-end;" 在容器末端对齐弹性项目：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
space-around 值显示行之前、之间和之后带有空格的 flex 项目：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;justify-content: space-around;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>justify-content 属性</h2><p>"justify-content: space-around;" 显示行之前、之间和之后带有空格的 flex 项目：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
space-between 值显示行之间有空格的 flex 项目：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;justify-content: space-between;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>justify-content 属性</h2><p>"justify-content: space-between;" 显示行之间有空格的 flex 项目：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
align-items 属性
align-items 属性用于垂直对齐 flex 项目。
1
2
3
在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-items 属性。
center 值将 flex 项目在容器中间对齐：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 200px;align-items: center;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-items 属性</h2><p>"align-items: center;" 将 flex 项目在容器中间对齐：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
flex-start 值将 flex 项目在容器顶部对齐：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 200px;align-items: flex-start;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-items 属性</h2><p>"align-items: flex-start;" 将 flex 项目在容器顶部对齐：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
flex-end 值将弹性项目在容器底部对齐：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 200px;align-items: flex-end;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-items 属性</h2><p>"align-items: flex-end;" 将弹性项目在容器底部对齐：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
stretch 值拉伸 flex 项目以填充容器（默认）：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 200px;align-items: stretch;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-items 属性</h2><p>"align-items: stretch;" 拉伸 flex 项目以填充容器（默认）：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div></div></body></html>
baseline 值使 flex 项目基线对齐：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 200px;align-items: baseline;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-items 属性</h2><p>"align-items: baseline;" 使 flex 项目基线对齐：</p><div class="flex-container"><div><h2>1</h2></div><div><h6>2</h6></div><div><h3>3</h3></div><div><small>4</small></div></div></body></html>
注意：该例使用不同的 font-size 来演示项目已按文本基线对齐：
1
2
3
4
align-content 属性
align-content 属性用于对齐弹性线。
1
2
3
4
5
6
7
8
9
10
11
12
在这些例子中，我们使用 600 像素高的容器，并将 flex-wrap 属性设置为 wrap，以便更好地演示 align-content 属性。
space-between 值显示的弹性线之间有相等的间距：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 600px;flex-wrap: wrap;align-content: space-between;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-content 属性</h2><p>"align-content: space-between;" 显示的弹性线之间有相等的间距：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></body></html>
space-around 值显示弹性线在其之前、之间和之后带有空格：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 600px;flex-wrap: wrap;align-content: space-around;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-content 属性</h2><p>"align-content: space-around;" 显示弹性线在其之前、之间和之后带有空格：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></body></html>
stretch 值拉伸弹性线以占据剩余空间（默认）：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 600px;flex-wrap: wrap;align-content: stretch;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-content 属性</h2><p>"align-content: stretch;" 拉伸弹性线以占据剩余空间（默认）：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></body></html>
center 值在容器中间显示弹性线：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 600px;flex-wrap: wrap;align-content: center;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-content 属性</h2><p>"align-content: center;" 在容器中间显示弹性线：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></body></html>
flex-start 值在容器开头显示弹性线：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 600px;flex-wrap: wrap;align-content: flex-start;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-content 属性</h2><p>"align-content: flex-start;" 在容器开头显示弹性线：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></body></html>
flex-end 值在容器的末尾显示弹性线：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;height: 600px;flex-wrap: wrap;align-content: flex-end;background-color: DodgerBlue;}.flex-container > div {background-color: #f1f1f1;width: 100px;margin: 10px;text-align: center;line-height: 75px;font-size: 30px;}</style></head><body><h2>align-content 属性</h2><p>"align-content: flex-end;" 在容器的末尾显示弹性线：</p><div class="flex-container"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div></div></body></html>
完美的居中
在下面的例子中，我们会解决一个非常常见的样式问题：完美居中。
解决方案：将 justify-content 和 align-items 属性设置为居中，然后 flex 项目将完美居中：
代码如下：
<!DOCTYPE html><html><head><style>.flex-container {display: flex;justify-content: center;align-items: center;height: 300px;background-color: DodgerBlue;}.flex-container>div {background-color: #f1f1f1;color: white;width: 100px;height: 100px;}</style></head><body><h2>完美的居中</h2><p>如果容器的 justify-content 和 align-items 属性都设置为 <em>center</em>，则项目会在两个轴的方向同时居中。</p><div class="flex-container"><div></div></div></body></html>