Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html基础 flex 容器与项目、fiex容器属性与项目属性
Blogger Information
Blog 19
fans 0
comment 0
visits 16186
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html基础 flex 容器与项目、fiex容器属性与项目属性
῀℡῀ᵒᵐᵍᵎᵎᵎ
Original
1273 people have browsed it

flex 容器与项目

1. display属性

序号 属性值 描述 备注
1 flex; 创建 flex 块级容器 内部子元素自动成为 flex 项目
2 inline-flex; 创建 flex 行内容器 内部子元素自动成为 flex 项目

2. flex 容器与项目特征

序号 容器/项目 默认行为
1 容器主轴 水平方向
2 项目排列 沿主轴起始线排列(当前起始线居左)
3 项目类型 自动转换”行内块级”元素,不管之前是什么类型
4 容器主轴空间不足时 项目自动收缩尺寸以适应空间变化,不会换行显示
5 容器主轴存在未分配空间时 项目保持自身大小不会放大并充满空间

3.flex布局代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.   </style>
  21.   <body>
  22.     <div class="flex-content">
  23.       <div class="flex-item">1</div>
  24.       <div class="flex-item">2</div>
  25.       <div class="flex-item">3</div>
  26.     </div>
  27.   </body>
  28. </html>

4.flex布局截图

5.容器属性

  • 定义在flex容器中的属性，容器属性定义了容器中所有的项目应有的行为及表现

    5.1.flex-direction

  • 定义项目在容器中排列的方向，有4种属性值：row | row-reverse | column | column-reverse
  • item在容器中默认是横向从左到右排列的。除此之外，我们还可以将它设置为横向从右到左(row-reverse)、纵向从上到下(column)、纵向从下到上(column-reverse)
    5.1.1 row（默认值） ,项目从左到右排列
    flex-direction:row
    5.1.2 row（默认值）代码实例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.     .flex-content {
  21.       flex-direction: row;
  22.     }
  23.   </style>
  24.   <body>
  25.     <div class="flex-content">
  26.       <div class="flex-item">1</div>
  27.       <div class="flex-item">2</div>
  28.       <div class="flex-item">3</div>
  29.     </div>
  30.   </body>
  31. </html>
5.1.3 row（默认值）实例截图

  • 可以看到和默认没有变化

5.2.row-reverse

5.2.1row-reverse项目反向排列（从右到左）

flex-direction:row-reverse

5.2.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.     /* 默认 */
  21.     /* .flex-content {
  22.       flex-direction: row;
  23.     } */
  24.     /* 重右到左 */
  25.     .flex-content {
  26.       flex-direction: row-reverse;
  27.     }
  28.   </style>
  29.   <body>
  30.     <div class="flex-content">
  31.       <div class="flex-item">1</div>
  32.       <div class="flex-item">2</div>
  33.       <div class="flex-item">3</div>
  34.     </div>
  35.   </body>
  36. </html>

5.2.3实列截图

5.3.column

5.3.1.项目纵向排列，从上到下）

flex-direction:column

5.3.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.     /* 默认 */
  21.     /* .flex-content {
  22.       flex-direction: row;
  23.     } */
  24.     /* 重右到左 */
  25.     /* .flex-content { 
  26.       flex-direction: row-reverse;
  27.     } */
  28.     /* 重上往下 */
  29.     .flex-content {
  30.       flex-direction: column;
  31.     }
  32.   </style>
  33.   <body>
  34.     <div class="flex-content">
  35.       <div class="flex-item">1</div>
  36.       <div class="flex-item">2</div>
  37.       <div class="flex-item">3</div>
  38.     </div>
  39.   </body>
  40. </html>

5.3.3实列截图

5.4.column-reverse

5.4.1.项目纵向排列，从上到下）

flex-direction:column-reverse

5.4.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       display: flex;
  12.       background-color: cornflowerblue;
  13.     }
  14.     .flex-item {
  15.       width: 130px;
  16.       height: 80px;
  17.       background-color: cyan;
  18.       font-size: 1.5rem;
  19.     }
  20.     /* 默认 */
  21.     /* .flex-content {
  22.       flex-direction: row;
  23.     } */
  24.     /* 重右到左 */
  25.     /* .flex-content { 
  26.       flex-direction: row-reverse;
  27.     } */
  28.     /* 重上往下 */
  29.     /* .flex-content {
  30.       flex-direction: column;
  31.     } */
  32.     /* 重下往上 */
  33.     .flex-content {
  34.       flex-direction: column-reverse;
  35.     }
  36.   </style>
  37.   <body>
  38.     <div class="flex-content">
  39.       <div class="flex-item">1</div>
  40.       <div class="flex-item">2</div>
  41.       <div class="flex-item">3</div>
  42.     </div>
  43.   </body>
  44. </html>

5.4.3实列截图

6.flex-wrap

  • 定义了容器中的项目在容器宽度不足以容纳项目时是否换换行。

6.1.nowrap(默认值)，item在容器中不换行,但item所设置的width可能失效

6.1.1.项目不换行）

flex-wrap:nowrap

6.1.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 100px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.     }
  15.     .flex-item {
  16.       width: 130px;
  17.       height: 80px;
  18.       background-color: cyan;
  19.       font-size: 1.5rem;
  20.     }
  21.     /* 默认 */
  22.     /* .flex-content {
  23.       flex-direction: row;
  24.     } */
  25.     /* 重右到左 */
  26.     /* .flex-content { 
  27.       flex-direction: row-reverse;
  28.     } */
  29.     /* 重上往下 */
  30.     /* .flex-content {
  31.       flex-direction: column;
  32.     } */
  33.     /* 重下往上 */
  34.     /* .flex-content {
  35.       flex-direction: column-reverse;
  36.     } */
  37.     /* 项目不换行，我们总宽度为620px，现在五个项目是650px */
  38.     .flex-content {
  39.       flex-wrap: nowrap;
  40.     }
  41.   </style>
  42.   <body>
  43.     <div class="flex-content">
  44.       <div class="flex-item">1</div>
  45.       <div class="flex-item">2</div>
  46.       <div class="flex-item">3</div>
  47.       <div class="flex-item">4</div>
  48.       <div class="flex-item">5</div>
  49.     </div>
  50.   </body>
  51. </html>

6.1.3实列截图

  • 由此我们可以看到它是默认还在一行的

6.2.wrap,item宽度不改变，容纳不下新增item时，自动换行

6.2.1.项目自动换行换行）

flex-wrap:wrap

6.2.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 100px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.     }
  15.     .flex-item {
  16.       width: 130px;
  17.       height: 80px;
  18.       background-color: cyan;
  19.       font-size: 1.5rem;
  20.     }
  21.     /* 默认 */
  22.     /* .flex-content {
  23.       flex-direction: row;
  24.     } */
  25.     /* 重右到左 */
  26.     /* .flex-content { 
  27.       flex-direction: row-reverse;
  28.     } */
  29.     /* 重上往下 */
  30.     /* .flex-content {
  31.       flex-direction: column;
  32.     } */
  33.     /* 重下往上 */
  34.     /* .flex-content {
  35.       flex-direction: column-reverse;
  36.     } */
  37.     /* 项目不换行，我们总宽度为620px，现在五个项目是650px */
  38.     /* .flex-content {
  39.       flex-wrap: nowrap;
  40.     } */
  41.     /* 现在项目自动换行了 */
  42.     .flex-content {
  43.       flex-wrap: wrap;
  44.     }
  45.   </style>
  46.   <body>
  47.     <div class="flex-content">
  48.       <div class="flex-item">1</div>
  49.       <div class="flex-item">2</div>
  50.       <div class="flex-item">3</div>
  51.       <div class="flex-item">4</div>
  52.       <div class="flex-item">5</div>
  53.     </div>
  54.   </body>
  55. </html>

6.2.3实列截图

6.3.wrap-reverse,反向换行，正常情况下换行是空间不够时向下换行，而wrap-reverse是空间不够时向上换行

6.3.1.项目反向）

flex-wrap:wrap-reverse

6.3.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.     }
  15.     .flex-item {
  16.       width: 130px;
  17.       height: 80px;
  18.       background-color: cyan;
  19.       font-size: 1.5rem;
  20.     }
  21.     /* 默认 */
  22.     /* .flex-content {
  23.       flex-direction: row;
  24.     } */
  25.     /* 重右到左 */
  26.     /* .flex-content { 
  27.       flex-direction: row-reverse;
  28.     } */
  29.     /* 重上往下 */
  30.     /* .flex-content {
  31.       flex-direction: column;
  32.     } */
  33.     /* 重下往上 */
  34.     /* .flex-content {
  35.       flex-direction: column-reverse;
  36.     } */
  37.     /* 项目不换行，我们总宽度为620px，现在五个项目是650px */
  38.     /* .flex-content {
  39.       flex-wrap: nowrap;
  40.     } */
  41.     /* 现在项目自动换行了 */
  42.     /* .flex-content {
  43.       flex-wrap: wrap;
  44.     } */
  45.    /* 项目反向 */
  46.     .flex-content {
  47.       flex-wrap: wrap-reverse;
  48.     }
  49.   </style>
  50.   <body>
  51.     <div class="flex-content">
  52.       <div class="flex-item">1</div>
  53.       <div class="flex-item">2</div>
  54.       <div class="flex-item">3</div>
  55.       <div class="flex-item">4</div>
  56.       <div class="flex-item">5</div>
  57.     </div>
  58.   </body>
  59. </html>

6.3.3实列截图

7.flex-flow

  • 是flex-direction与flex-wrap的简写形式
    flex-flow:<flex-direction> <flex-wrap>

7.1代码实列

  1. .flex-content{
  2.     flex-flow:row wrap;
  3. }
  5. //相当于
  6. .flex-content{
  7.     flex-direction:row;
  8.     flex-wrap:wrap;
  9. }

8.1justify-content

  • 定义了项目的水平方向对齐方式，有5种属性值flex-start | flex-end | center | space-between | space-around

8.1.1flex-start 项目左对齐

justify-content: flex-start

8.1.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       justify-content: flex-start;
  16.     }
  17.     .flex-item {
  18.       width: 130px;
  19.       height: 80px;
  20.       background-color: cyan;
  21.       font-size: 1.5rem;
  22.     }
  23.   </style>
  24.   <body>
  25.     <div class="flex-content">
  26.       <div class="flex-item">1</div>
  27.       <div class="flex-item">2</div>
  28.       <div class="flex-item">3</div>
  29.     </div>
  30.   </body>
  31. </html>

8.1.3截图实列

8.2.1flex-end 项目右对齐

justify-content: flex-end

8.2.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       justify-content: flex-end;
  18.     }
  19.     .flex-item {
  20.       width: 130px;
  21.       height: 80px;
  22.       background-color: cyan;
  23.       font-size: 1.5rem;
  24.     }
  25.   </style>
  26.   <body>
  27.     <div class="flex-content">
  28.       <div class="flex-item">1</div>
  29.       <div class="flex-item">2</div>
  30.       <div class="flex-item">3</div>
  31.     </div>
  32.   </body>
  33. </html>

8.2.3截图实列

8.3.1center 项目居中

justify-content: center

8.3.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       justify-content: center;
  20.     }
  21.     .flex-item {
  22.       width: 130px;
  23.       height: 80px;
  24.       background-color: cyan;
  25.       font-size: 1.5rem;
  26.     }
  27.   </style>
  28.   <body>
  29.     <div class="flex-content">
  30.       <div class="flex-item">1</div>
  31.       <div class="flex-item">2</div>
  32.       <div class="flex-item">3</div>
  33.     </div>
  34.   </body>
  35. </html>

8.3.3截图实列

8.4.1space-between 项目两端对齐

justify-content: space-between

8.4.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       /* justify-content: center; */
  20.       /* 项目两端对齐 */
  21.       justify-content: space-between;
  22.     }
  23.     .flex-item {
  24.       width: 130px;
  25.       height: 80px;
  26.       background-color: cyan;
  27.       font-size: 1.5rem;
  28.     }
  29.   </style>
  30.   <body>
  31.     <div class="flex-content">
  32.       <div class="flex-item">1</div>
  33.       <div class="flex-item">2</div>
  34.       <div class="flex-item">3</div>
  35.     </div>
  36.   </body>
  37. </html>

8.4.3截图实列

8.5.1space-around 每个项目间隔相同

justify-content: space-around

8.5.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       /* justify-content: center; */
  20.       /* 项目两端对齐 */
  21.       /* justify-content: space-between; */
  22.       /* 项目间隔相同 */
  23.       justify-content: space-around;
  24.     }
  25.     .flex-item {
  26.       width: 130px;
  27.       height: 80px;
  28.       background-color: cyan;
  29.       font-size: 1.5rem;
  30.     }
  31.   </style>
  32.   <body>
  33.     <div class="flex-content">
  34.       <div class="flex-item">1</div>
  35.       <div class="flex-item">2</div>
  36.       <div class="flex-item">3</div>
  37.     </div>
  38.   </body>
  39. </html>

8.5.3截图实列

9.1align-items

  • 这个属性与justify-content恰好相反，align-items定义了项目的竖直方向对齐方式。其属性值有flex-start | flex-end | center | baseline | strectch

    9.1.1flex-start 项目顶端对齐

    align-items: flex-start

    9.1.2代码实列

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7. </head>
    8. <style>
    9.   .flex-content {
    10.     width: 620px;
    11.     height: 180px;
    12.     display: flex;
    13.     background-color: cornflowerblue;
    14.     /* 项目左对齐 */
    15.     /* justify-content: flex-start; */
    16.     /* 项目右对齐 */
    17.     /* justify-content: flex-end; */
    18.     /* 项目居中 */
    19.     justify-content: center;
    20.     /* 项目两端对齐 */
    21.     /* justify-content: space-between; */
    22.     /* 项目间隔相同 */
    23.     /* justify-content: space-around; */
    24.     align-items: flex-start;
    25.   }
    26.   .flex-item1 {
    27.     width: 130px;
    28.     height: 80px;
    29.     background-color: cyan;
    30.     font-size: 1.5rem;
    31.   }
    32.   .flex-item2 {
    33.     width: 130px;
    34.     height: 50px;
    35.     background-color: rgb(255, 0, 212);
    36.     font-size: 1.5rem;
    37.   }
    38.   .flex-item3 {
    39.     width: 130px;
    40.     height: 120px;
    41.     background-color: rgb(4, 0, 255);
    42.     font-size: 1.5rem;
    43.   }
    44. </style>
    45. <body>
    46.   <div class="flex-content">
    47.     <div class="flex-item1">1</div>
    48.     <div class="flex-item2">2</div>
    49.     <div class="flex-item3">3</div>
    50.   </div>
    51. </body>
    52. </html>

9.1.3截图实列

9.2.1flex-end 项目底端对齐

align-items: flex-end

9.2.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       justify-content: center;
  20.       /* 项目两端对齐 */
  21.       /* justify-content: space-between; */
  22.       /* 项目间隔相同 */
  23.       /* justify-content: space-around; */
  24.       /* 项目顶端对齐 */
  25.       /* align-items: flex-start; */
  26.       /* 项目底端对齐 */
  27.       align-items: flex-end;
  28.     }
  29.     .flex-item1 {
  30.       width: 130px;
  31.       height: 80px;
  32.       background-color: cyan;
  33.       font-size: 1.5rem;
  34.     }
  35.     .flex-item2 {
  36.       width: 130px;
  37.       height: 50px;
  38.       background-color: rgb(255, 0, 212);
  39.       font-size: 1.5rem;
  40.     }
  41.     .flex-item3 {
  42.       width: 130px;
  43.       height: 120px;
  44.       background-color: rgb(4, 0, 255);
  45.       font-size: 1.5rem;
  46.     }
  47.   </style>
  48.   <body>
  49.     <div class="flex-content">
  50.       <div class="flex-item1">1</div>
  51.       <div class="flex-item2">2</div>
  52.       <div class="flex-item3">3</div>
  53.     </div>
  54.   </body>
  55. </html>

9.2.3截图实列

9.3.1center 项目中间对齐

align-items: center

9.3.2代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       /* 项目左对齐 */
  15.       /* justify-content: flex-start; */
  16.       /* 项目右对齐 */
  17.       /* justify-content: flex-end; */
  18.       /* 项目居中 */
  19.       justify-content: center;
  20.       /* 项目两端对齐 */
  21.       /* justify-content: space-between; */
  22.       /* 项目间隔相同 */
  23.       /* justify-content: space-around; */
  24.       /* 项目顶端对齐 */
  25.       /* align-items: flex-start; */
  26.       /* 项目底端对齐 */
  27.       /* align-items: flex-end; */
  28.       /* 项目中间对齐 */
  29.       align-items: center;
  30.     }
  31.     .flex-item1 {
  32.       width: 130px;
  33.       height: 80px;
  34.       background-color: cyan;
  35.       font-size: 1.5rem;
  36.     }
  37.     .flex-item2 {
  38.       width: 130px;
  39.       height: 50px;
  40.       background-color: rgb(255, 0, 212);
  41.       font-size: 1.5rem;
  42.     }
  43.     .flex-item3 {
  44.       width: 130px;
  45.       height: 120px;
  46.       background-color: rgb(4, 0, 255);
  47.       font-size: 1.5rem;
  48.     }
  49.   </style>
  50.   <body>
  51.     <div class="flex-content">
  52.       <div class="flex-item1">1</div>
  53.       <div class="flex-item2">2</div>
  54.       <div class="flex-item3">3</div>
  55.     </div>
  56.   </body>
  57. </html>

9.3.3截图实列

10.order 定义了项目的排列顺列，order的值越小，项目的排列位置越靠前。默认值为0

10.1代码实列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.   </head>
  8.   <style>
  9.     .flex-content {
  10.       width: 620px;
  11.       height: 180px;
  12.       display: flex;
  13.       background-color: cornflowerblue;
  14.       justify-content: center;
  15.     }
  16.     .flex-item1 {
  17.       width: 130px;
  18.       height: 80px;
  19.       background-color: cyan;
  20.       font-size: 1.5rem;
  21.     }
  22.     .flex-item2 {
  23.       width: 130px;
  24.       height: 50px;
  25.       background-color: rgb(255, 0, 212);
  26.       font-size: 1.5rem;
  27.     }
  28.     .flex-item3 {
  29.       width: 130px;
  30.       height: 120px;
  31.       background-color: rgb(4, 0, 255);
  32.       font-size: 1.5rem;
  33.     }
  34.     .flex-item1 {
  35.       order: 3;
  36.     }
  38.     .flex-item2 {
  39.       order: 1;
  40.     }
  42.     .flex-item3 {
  43.       order: 2;
  44.     }
  45.   </style>
  46.   <body>
  47.     <div class="flex-content">
  48.       <div class="flex-item1">1</div>
  49.       <div class="flex-item2">2</div>
  50.       <div class="flex-item3">3</div>
  51.     </div>
  52.   </body>
  53. </html>

10.2截图实列

11.flex-grow 定义了项目的放大比例，默认值为0，表示不放大

  • 在这里依次给.flex-item的flex-grow的值设置为0、2、3。其中0表示.flex-item的默认宽度，并没有放大。2、3表示将剩余的空间分为2+3=5份，其中item2占2/5份，.flex-item3占3/5份。

    11.1代码实列

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7. </head>
    8. <style>
    9.   .flex-content {
    10.     width: 620px;
    11.     height: 180px;
    12.     display: flex;
    13.     background-color: cornflowerblue;
    14.     justify-content: center;
    15.   }
    16.   .flex-item1 {
    17.     width: 130px;
    18.     height: 80px;
    19.     background-color: cyan;
    20.     font-size: 1.5rem;
    21.   }
    22.   .flex-item2 {
    23.     width: 130px;
    24.     height: 50px;
    25.     background-color: rgb(255, 0, 212);
    26.     font-size: 1.5rem;
    27.   }
    28.   .flex-item3 {
    29.     width: 130px;
    30.     height: 120px;
    31.     background-color: rgb(4, 0, 255);
    32.     font-size: 1.5rem;
    33.   }
    34.   /* .flex-item1 {
    35.     order: 3;
    36.   }
    38.   .flex-item2 {
    39.     order: 1;
    40.   }
    42.   .flex-item3 {
    43.     order: 2;
    44.   } */
    45.   .flex-item1 {
    46.     flex-grow: 0;
    47.   }
    49.   .flex-item2 {
    50.     flex-grow: 2;
    51.   }
    53.   .flex-item3 {
    54.     flex-grow: 3;
    55.   }
    56. </style>
    57. <body>
    58.   <div class="flex-content">
    59.     <div class="flex-item1">1</div>
    60.     <div class="flex-item2">2</div>
    61.     <div class="flex-item3">3</div>
    62.   </div>
    63. </body>
    64. </html>

    11.2截图实列

12.flex-shrink 定义了项目的缩小比例。默认值为1，表示当空间不足时将项目缩小至能被空间容纳

  • flex-shrink的值必须大于或等于0。当值为负数时，此值无效，相当于默认值。当值为0时，表示项目不缩放。值为1时，项目缩放。在这里，flex-item1、2、3的宽都被设置为130px，然而总的宽为320px，显然是不够宽的，但是因为flex-item1的flex-shrink值为0，所以不会被缩放，flex-item2、flex-item3的flex-shrink值为1，flex容器容纳不下时缩小了，所以它又能装下了。

    12.1代码实列

    1. <!DOCTYPE html>
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.   <title>Document</title>
    8. </head>
    9. <style>
    10.   .flex-content {
    11.     width: 320px;
    12.     height: 180px;
    13.     display: flex;
    14.     background-color: cornflowerblue;
    15.     justify-content: center;
    16.   }
    17.   .flex-item1 {
    18.     width: 130px;
    19.     height: 80px;
    20.     background-color: cyan;
    21.     font-size: 1.5rem;
    22.   }
    23.   .flex-item2 {
    24.     width: 130px;
    25.     height: 50px;
    26.     background-color: rgb(255, 0, 212);
    27.     font-size: 1.5rem;
    28.   }
    29.   .flex-item3 {
    30.     width: 130px;
    31.     height: 120px;
    32.     background-color: rgb(4, 0, 255);
    33.     font-size: 1.5rem;
    34.   }
    35.   /* .flex-item1 {
    36.     order: 3;
    37.   }
    39.   .flex-item2 {
    40.     order: 1;
    41.   }
    43.   .flex-item3 {
    44.     order: 2;
    45.   } */
    46.   /* .flex-item1 {
    47.     flex-grow: 0;
    48.   }
    50.   .flex-item2 {
    51.     flex-grow: 2;
    52.   }
    54.   .flex-item3 {
    55.     flex-grow: 3;
    56.   } */
    57.   .flex-item1 {
    58.     flex-shrink: 0;
    59.   }
    61.   .flex-item2 {
    62.     flex-shrink: 1;
    63.   }
    65.   .flex-item3 {
    66.     flex-shrink: 1;
    67.   }
    68. </style>
    69. <body>
    70.   <div class="flex-content">
    71.     <div class="flex-item1">1</div>
    72.     <div class="flex-item2">2</div>
    73.     <div class="flex-item3">3</div>
    74.   </div>
    75. </body>
    76. </html>

    12.2截图实列

13.flex-basis 定义了flex items 在被放进一个flex容器之前的大小(flex-basis含义)。默认值为auto

  • 通过flex-basis的含义可以很直观的感觉到flex-basis的作用跟width似乎一样。但是两者是有区别的，尽管两者都可以设置flex-item3的宽，但在flex容器中flex-basis的优先级高于width，即两者同时存在时，width会被屏蔽，无论代码中两者的先后顺序如何。

    13.1代码实列

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7. </head>
    8. <style>
    9.   .flex-content {
    10.     width: 720px;
    11.     height: 180px;
    12.     display: flex;
    13.     background-color: cornflowerblue;
    14.     justify-content: center;
    15.   }
    16.   .flex-item1 {
    17.     width: 130px;
    18.     height: 80px;
    19.     background-color: cyan;
    20.     font-size: 1.5rem;
    21.   }
    22.   .flex-item2 {
    23.     width: 130px;
    24.     height: 80px;
    25.     background-color: darkkhaki;
    26.     font-size: 1.5rem;
    27.   }
    28.   .flex-item3 {
    29.     height: 80px;
    30.     background-color: darkorange;
    31.     font-size: 1.5rem;
    32.   }
    34.   .flex-item3 {
    35.     flex-basis: 200px;
    36.     width: 130px;
    37.   }
    38. </style>
    39. <body>
    40.   <div class="flex-content">
    41.     <div class="flex-item1">1</div>
    42.     <div class="flex-item2">2</div>
    43.     <div class="flex-item3">3</div>
    44.   </div>
    45. </body>
    46. </html>

    13.2截图实列

14flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。flex-shrink和flex-basis是可选属性。

15.align-self 定义了单个项目的竖直方向对齐方式，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

  • flex-item1、flex-item3未设置align-self，其默认值为auto，所以继承了父元素的flex-start保持顶端对齐。而flex-item2设置了align-self为flex-end，固flex-item2是底端对齐的。

    15.1代码实列

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8" />
    5.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.   <title>Document</title>
    7. </head>
    8. <style>
    9.   .flex-content {
    10.     width: 720px;
    11.     height: 180px;
    12.     display: flex;
    13.     background-color: cornflowerblue;
    14.     justify-content: center;
    15.   }
    16.   .flex-item1 {
    17.     width: 130px;
    18.     height: 80px;
    19.     background-color: cyan;
    20.     font-size: 1.5rem;
    21.   }
    22.   .flex-item2 {
    23.     width: 130px;
    24.     height: 80px;
    25.     background-color: darkkhaki;
    26.     font-size: 1.5rem;
    27.   }
    28.   .flex-item3 {
    29.     width: 130px;
    30.     height: 80px;
    31.     background-color: darkorange;
    32.     font-size: 1.5rem;
    33.   }
    35.   .flex-content {
    36.     align-items: flex-start;
    37.   }
    38.   .flex-item2 {
    39.     align-self: flex-end;
    40.   }
    41. </style>
    42. <body>
    43.   <div class="flex-content">
    44.     <div class="flex-item1">1</div>
    45.     <div class="flex-item2">2</div>
    46.     <div class="flex-item3">3</div>
    47.   </div>
    48. </body>
    49. </html>

    15.2截图实列

学习总结：

一、容器属性：

　　1.flex-direction（方向）

　　2.flex-wrap（换行）

　　3.flex-flow（方向、换行的简写）

　　4.justify-content（水平方向对齐）

　　5.align-items（竖直方向对齐）

　　6.align-content（多行对齐）

二、项目属性：

　　1.order（顺序）

　　2.flex-grow（放大）

　　3.flex-shrink（缩小）

　　4.flex-basis（宽）

　　5.flex（放大、缩小、宽的简写）

　　6.align-self （单个竖直方向对齐）

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：每个属性都值得去研究, 但刚接触应该将重点放在一些常用属性上
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post