search

博客列表 >html基础 flex 容器与项目、fiex容器属性与项目属性

html基础 flex 容器与项目、fiex容器属性与项目属性

῀℡῀ᵒᵐᵍᵎᵎᵎ
῀℡῀ᵒᵐᵍᵎᵎᵎ原创
2020年04月10日 17:00:581272浏览

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 （单个竖直方向对齐）

上一条：框模型的样式设置和定位机制下一条：flex容器与项目笔记作业和感想
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多