参考手册
CSS Flexbox
CSS Flex Container
CSS 自适应的Flex
返回 CSS Flexbox

CSS3 Flex Item

子元素（项目）

flex 容器的直接子元素会自动成为弹性（flex）项目。

1

2

3

4

上面的元素代表一个灰色 flex 容器内的四个蓝色 flex 项目。

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.   display: flex;
  7.   background-color: #f1f1f1;
  8. }
  10. .flex-container > div {
  11.   background-color: DodgerBlue;
  12.   color: white;
  13.   width: 100px;
  14.   margin: 10px;
  15.   text-align: center;
  16.   line-height: 75px;
  17.   font-size: 30px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  23. <h1>弹性项目</h1>
  25. <div class="flex-container">
  26.   <div>1</div>
  27.   <div>2</div>
  28.   <div>3</div>
  29.   <div>4</div>
  30. </div>
  32. <p>弹性容器的所有直接子元素会（自动）成为弹性项目。</p>
  34. </body>
  35. </html>
运行一下

用于弹性项目的属性有：

order 属性

order 属性规定 flex 项目的顺序。

1

2

3

4

代码中的首个 flex 项目不必在布局中显示为第一项。order 值必须是数字，默认值是 0。

order 属性可以改变 flex 项目的顺序：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.   display: flex;
  7.   align-items: stretch;
  8.   background-color: #f1f1f1;
  9. }
  11. .flex-container>div {
  12.   background-color: DodgerBlue;
  13.   color: white;
  14.   width: 100px;
  15.   margin: 10px;
  16.   text-align: center;
  17.   line-height: 75px;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <h1>order 属性</h1>
  25. <p>使用 order 属性可以根据需要对 flex 项目进行排序：</p>
  27. <div class="flex-container">
  28.   <div style="order: 3">1</div>
  29.   <div style="order: 2">2</div>
  30.   <div style="order: 4">3</div>
  31.   <div style="order: 1">4</div>
  32. </div>
  34. </body>
  35. </html>
运行一下

flex-grow 属性

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

1

2

3

该值必须是数字，默认值是 0。

使第三个弹性项目的增长速度比其他弹性项目快八倍：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.   display: flex;
  7.   align-items: stretch;
  8.   background-color: #f1f1f1;
  9. }
  11. .flex-container > div {
  12.   background-color: DodgerBlue;
  13.   color: white;
  14.   margin: 10px;
  15.   text-align: center;
  16.   line-height: 75px;
  17.   font-size: 30px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h1>flex-grow 属性</h1>
  24. <p>使第三个弹性项目的增长速度比其他弹性项目快八倍：</p>
  26. <div class="flex-container">
  27.   <div style="flex-grow: 1">1</div>
  28.   <div style="flex-grow: 1">2</div>
  29.   <div style="flex-grow: 8">3</div>
  30. </div>
  32. </body>
  33. </html>
运行一下

flex-shrink 属性

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

1

2

3

4

5

6

7

8

9

10

该值必须是数字，默认值是 0。

不要让第三个弹性项目收缩得与其他弹性项目一样多：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.   display: flex;
  7.   align-items: stretch;
  8.   background-color: #f1f1f1;
  9. }
  11. .flex-container>div {
  12.   background-color: DodgerBlue;
  13.   color: white;
  14.   width: 100px;
  15.   margin: 10px;
  16.   text-align: center;
  17.   line-height: 75px;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <h1>flex-shrink 属性</h1>
  25. <p>不要让第三个弹性项目收缩得与其他弹性项目一样多：</p>
  27. <div class="flex-container">
  28.   <div>1</div>
  29.   <div>2</div>
  30.   <div style="flex-shrink: 0">3</div>
  31.   <div>4</div>
  32.   <div>5</div>
  33.   <div>6</div>
  34.   <div>7</div>
  35.   <div>8</div>
  36.   <div>9</div>
  37.   <div>10</div>
  38. </div>
  40. </body>
  41. </html>
运行一下

flex-basis 属性

flex-basis 属性规定 flex 项目的初始长度。

1

2

3

4

将第三个弹性项目的初始长度设置为 200 像素：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.   display: flex;
  7.   align-items: stretch;
  8.   background-color: #f1f1f1;
  9. }
  11. .flex-container > div {
  12.   background-color: DodgerBlue;
  13.   color: white;
  14.   width: 100px;
  15.   margin: 10px;
  16.   text-align: center;
  17.   line-height: 75px;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <h1>flex-basis 属性</h1>
  25. <p>将第三个弹性项目的初始长度设置为 200 像素：</p>
  27. <div class="flex-container">
  28.   <div>1</div>
  29.   <div>2</div>
  30.   <div style="flex-basis:200px">3</div>
  31.   <div>4</div>
  32. </div>
  34. </body>
  35. </html>
运行一下

flex 属性

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.   display: flex;
  7.   align-items: stretch;
  8.   background-color: #f1f1f1;
  9. }
  11. .flex-container>div {
  12.   background-color: DodgerBlue;
  13.   color: white;
  14.   width: 100px;
  15.   margin: 10px;
  16.   text-align: center;
  17.   line-height: 75px;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <h1>flex 属性</h1>
  25. <p>使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：</p>
  27. <div class="flex-container">
  28.   <div>1</div>
  29.   <div>2</div>
  30.   <div style="flex: 0 0 200px">3</div>
  31.   <div>4</div>
  32. </div>
  34. </body>
  35. </html>
运行一下

align-self 属性

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

1

2

3

4

在这些例子中，我们使用 200 像素高的容器，以便更好地演示 align-self 属性：

把第三个弹性项目对齐到容器的中间：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.   display: flex;
  7.   height: 200px;
  8.   background-color: #f1f1f1;
  9. }
  11. .flex-container > div {
  12.   background-color: DodgerBlue;
  13.   color: white;
  14.   width: 100px;
  15.   margin: 10px;
  16.   text-align: center;
  17.   line-height: 75px;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <h1>align-self 属性</h1>
  25. <p>"align-self: center;" 在容器中间对齐所选的弹性项目：</p>
  27. <div class="flex-container">
  28.   <div>1</div>
  29.   <div>2</div>
  30.   <div style="align-self: center">3</div>
  31.   <div>4</div>
  32. </div>
  34. <p>align-self 会覆盖容器的 align-items 属性。</p>
  36. </body>
  37. </html>
运行一下

将第二个弹性项目在容器顶部对齐，将第三个弹性项目在容器底部对齐：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .flex-container {
  6.   display: flex;
  7.   height: 200px;
  8.   background-color: #f1f1f1;
  9. }
  11. .flex-container > div {
  12.   background-color: DodgerBlue;
  13.   color: white;
  14.   width: 100px;
  15.   margin: 10px;
  16.   text-align: center;
  17.   line-height: 75px;
  18.   font-size: 30px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <h1>align-self 属性</h1>
  25. <p>"align-self: flex-start;" 在容器顶部对齐所选的弹性项目。</p>
  26. <p>"align-self: flex-end;" 在容器底部对齐所选的弹性项目。</p>
  28. <div class="flex-container">
  29.   <div>1</div>
  30.   <div style="align-self: flex-start">2</div>
  31.   <div style="align-self: flex-end">3</div>
  32.   <div>4</div>
  33. </div>
  35. <p>align-self 会覆盖容器的 align-items 属性。</p>
  37. </body>
  38. </html>
运行一下
CSS Flex Container
CSS 自适应的Flex

分类导航