简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >flex弹性布局主要用法

flex弹性布局主要用法

岂几岂几
岂几岂几原创
2020年04月12日 17:33:35727浏览

1. 初识flex布局

  • flex布局分两种, 一种是flex容器独占一行的布局方式(flex), 另一种是类似行内块元素布局的方式(inline-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>初识flex布局</title>
    7.   <style>
    8.     /* 2.设置容器样式 */
    9.     .container {
    10.       width: 300px;
    11.       height: 150px;
    12.     }
    13.     /* 3.设置项目样式 */
    14.     .item {
    15.       width: 100px;
    16.       height: 50px;
    17.       background-color: bisque;
    18.       font-size: 1.5rem;
    19.     }
    21.     /* 4.将容器/父元素设置为flex容器 */
    22.     .container {
    23.       display: flex;
    24.       /* 4.1.行内块形式的flex容器 */
    25.       /* display: inline-flex; */
    26.     }
    27.   </style>
    28. </head>
    29. <body>
    30.   <h2>初识flex布局</h2>
    31.   <!-- 1.先写好元素 -->
    32.   <!-- 1.1.flex容器 -->
    33.   <div class="container">
    34.     <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
    35.     <div class="item">1</div>
    36.     <div class="item">2</div>
    37.     <div class="item">3</div>
    38.     <div class="item">4</div>
    39.   </div>
    40.   <!-- 4.1.演示行内块形式的flex容器用 -->
    41.   <!-- <div class="container">
    42.     <div class="item">1</div>
    43.     <div class="item">2</div>
    44.     <div class="item">3</div>
    45.     <div class="item">4</div>
    46.   </div> -->
    47. </body>
    48. </html>

2. 设置flex的主轴方向

  • flex的主轴可以是水平的,也可以是垂直的.可以使用flex-direction属性设置其主轴方向.

    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>设置flex的主轴方向</title>
    7.   <style>
    8.     /* 2.设置容器样式 */
    9.     .container {
    10.       width: 300px;
    11.       height: 150px;
    12.     }
    13.     /* 3.设置项目样式 */
    14.     .item {
    15.       width: 100px;
    16.       height: 50px;
    17.       background-color: bisque;
    18.       font-size: 1.5rem;
    19.     }
    21.     /* 4.将容器/父元素设置为flex容器 */
    22.     .container {
    23.       display: flex;
    24.     }
    25.     /* 5.设置主轴方向 */
    26.     .container {
    27.       flex-direction: row; /* 水平方向, 从左到右; 默认值 */
    28.       /* flex-direction: row-reverse; */ /* 水平方向, 从右到左 */
    29.       /* flex-direction: column; */ /* 垂直方向, 从上到下 */
    30.       /* flex-direction: column-reverse; */ /* 垂直方向, 从下到上 */
    31.     }
    32.   </style>
    33. </head>
    34. <body>
    35.   <h2>设置flex的主轴方向</h2>
    36.   <!-- 1.先写好元素 -->
    37.   <!-- 1.1.flex容器 -->
    38.   <div class="container">
    39.     <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
    40.     <div class="item">1</div>
    41.     <div class="item">2</div>
    42.     <div class="item">3</div>
    43.     <div class="item">4</div>
    44.   </div>
    45. </body>
    46. </html>

3. 设置flex布局主轴方向的项目布局方式

  • 使用flex-wrap属性设置主轴方向的布局方式.其值有:

    • nowrap:不换行(默认值),即当前容器容纳不下时,项目自动收缩
    • wrap:换行布局, 若当前容器容纳不下, 多出的项目往交叉轴的结束端方向拆行显示; 此时, 创建的flex容器叫: 多行容器

    • wrap-reverse:反向多行容器, 多出的项目往交叉轴的开始端方向拆行显示.

      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>设置flex主轴方向的项目布局方式</title>
      7. <style>
      8. /* 2.设置容器样式 */
      9. .container {
      10.   width: 300px;
      11.   height: 150px;
      12. }
      13. /* 3.设置项目样式 */
      14. .item {
      15.   width: 100px;
      16.   height: 50px;
      17.   background-color: bisque;
      18.   font-size: 1.5rem;
      19. }
      21. /* 4.将容器/父元素设置为flex容器 */
      22. .container {
      23.   display: flex;
      24.   /* 4.1.主轴以水平方向, 从左到右为例; */
      25.   flex-direction: row;
      26. }
      27. /* 5.设置主轴方向的项目布局形式 */
      28. .container {
      29.   /* 不换行(默认值), 若当前容器容纳不下, 项目自动收缩 */
      30.   flex-wrap: nowrap;
      31.   /* 换行布局, 若当前容器容纳不下, 多出的项目往交叉轴的结束端方向拆行显示; 此时, 创建的flex容器叫: 多行容器 */
      32.   /* flex-wrap: wrap; */
      33.   /* 反向多行容器, 多出的项目往交叉轴的开始端方向拆行显示. */
      34.   /* flex-wrap: wrap-reverse; */
      35. }
      36. </style>
      37. </head>
      38. <body>
      39. <h2>设置flex主轴方向的项目布局方式</h2>
      40. <!-- 1.先写好元素 -->
      41. <!-- 1.1.flex容器 -->
      42. <div class="container">
      43. <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
      44. <div class="item">1</div>
      45. <div class="item">2</div>
      46. <div class="item">3</div>
      47. <div class="item">4</div>
      48. </div>
      49. </body>
      50. </html>

4. 用flex-flow属性同时设置主轴方向和主轴方向的项目布局方式

  • flex-flow属性使用格式: flex-flow: 主轴方向 主轴上项目布局方式;

  • flex-flow属性的值为两个属性值时, 是flex-direction和flex-wrap属性值的排列组合.

    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>用flex-flow属性同时设置主轴方向和主轴方向的项目布局方式</title>
    7.   <style>
    8.     /* 2.设置容器样式 */
    9.     .container {
    10.       width: 300px;
    11.       height: 150px;
    12.     }
    13.     /* 3.设置项目样式 */
    14.     .item {
    15.       width: 100px;
    16.       height: 50px;
    17.       background-color: bisque;
    18.       font-size: 1.5rem;
    19.     }
    21.     /* 4.将容器/父元素设置为flex容器 */
    22.     .container {
    23.       display: flex;
    24.     }
    25.     /* 5.同时设置主轴方向和主轴方向的项目布局方式 */
    26.     .container {
    27.       /* 两个值, 第一个值是主轴方向, 第二个值是布局方式 */
    28.       /* 水平方向,从左到右,不折行 */
    29.       flex-flow: row nowrap;
    30.       /* 水平方向,从左到右,折行 */
    31.       /* flex-flow: row wrap; */
    32.       /* 水平方向,从左到右,反向折行 */
    33.       /* flex-flow: row wrap-reverse; */
    34.       /* 水平方向,从右到左,不折行 */
    35.       /* flex-flow: row-reverse nowrap; */
    36.       /* 就是主轴属性值和布局方式属性值的排列组合, 其他略... */
    37.     }
    38.   </style>
    39. </head>
    40. <body>
    41.   <h3>用flex-flow属性同时设置主轴方向和主轴方向的项目布局方式</h3>
    42.   <!-- 1.先写好元素 -->
    43.   <!-- 1.1.flex容器 -->
    44.   <div class="container">
    45.     <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
    46.     <div class="item">1</div>
    47.     <div class="item">2</div>
    48.     <div class="item">3</div>
    49.     <div class="item">4</div>
    50.   </div>
    51. </body>
    52. </html>

5. 设置flex布局主轴方向的项目对齐方式

  • 使用justify-content属性完成设置.
  • 其值有:
    • flex-start:跟主轴的起始线对齐
    • flex-end:跟主轴的结束线对齐
    • center:主轴方向居中对齐
    • space-between:两端对齐: 左右两个项目抵到主轴的起始线和结束线,中间的项目间距平均分
    • space-around:分散对齐: 各个项目左右分配的间距相等, 且相邻项目的间距不重叠
    • space-evenly:平均对齐: 各个项目左右分配的间距相等, 相邻项目的间距重叠(类似margin)
  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>设置flex主轴方向的项目对齐方式</title>
  7.     <style>
  8.       /* 2.设置容器样式 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.       }
  13.       /* 3.设置项目样式 */
  14.       .item {
  15.         width: 50px;
  16.         height: 50px;
  17.         background-color: bisque;
  18.         font-size: 1.5rem;
  19.       }
  21.       /* 4.将容器/父元素设置为flex容器 */
  22.       .container {
  23.         display: flex;
  24.         /* 4.1.主轴以水平方向, 从左到右为例; */
  25.         flex-direction: row;
  26.         /* 4.2.主轴项目布局以不折行为例 */
  27.         flex-wrap: nowrap;
  28.       }
  29.       /* 5.设置主轴方向的项目对齐形式 */
  30.       .container {
  31.         /* 跟主轴的起始线对齐, 本例的条件设置,就是左对齐 */
  32.         justify-content: flex-start;
  33.         /* 跟主轴的结束线对齐, 本例的条件设置,就是右对齐 */
  34.         /* justify-content: flex-end; */
  35.         /* 主轴方向居中对齐, 本例的条件设置,就是水平居中 */
  36.         /* justify-content: center; */
  38.         /* 两端对齐: 左右两个项目抵到主轴的起始线和结束线,
  39.           中间的项目间距平均分 */
  40.         /* justify-content: space-between; */
  41.         /* 分散对齐: 各个项目左右分配的间距相等, 且相邻项目的间距不重叠 */
  42.         /* justify-content: space-around; */
  43.         /* 平均对齐: 各个项目左右分配的间距相等, 相邻项目的间距重叠(类似margin) */
  44.         /* justify-content: space-evenly; */
  45.       }
  46.     </style>
  47.   </head>
  48.   <body>
  49.     <h2>设置flex主轴方向的项目对齐方式</h2>
  50.     <div style="margin-bottom: 20px; font-size: small;">
  51.       注意:只有flex容器主轴方向上还有剩余空间的时候才有效
  52.     </div>
  53.     <!-- 1.先写好元素 -->
  54.     <!-- 1.1.flex容器 -->
  55.     <div class="container">
  56.       <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
  57.       <div class="item">1</div>
  58.       <div class="item">2</div>
  59.       <div class="item">3</div>
  60.       <div class="item">4</div>
  61.     </div>
  62.   </body>
  63. </html>

6. 设置flex交叉轴方向的项目对齐方式(单行容器)

  • 使用align-items设置单行flex容器交叉轴的项目对齐方式.其值有:
    • flex-start:跟交叉轴的起始线对齐
    • flex-end:跟交叉轴的结束线对齐
    • center:交叉轴方向居中对齐
  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>设置flex交叉轴方向的项目对齐方式</title>
  7.     <style>
  8.       /* 2.设置容器样式 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.       }
  13.       /* 3.设置项目样式 */
  14.       .item {
  15.         width: 50px;
  16.         height: 50px;
  17.         background-color: bisque;
  18.         font-size: 1.5rem;
  19.       }
  21.       /* 4.将容器/父元素设置为flex容器 */
  22.       .container {
  23.         display: flex;
  24.         /* 4.1.主轴以水平方向, 从左到右为例; */
  25.         flex-direction: row;
  26.         /* 4.2.主轴项目布局以不折行为例 */
  27.         flex-wrap: nowrap;
  28.       }
  29.       /* 5.设置交叉轴方向的项目对齐形式 */
  30.       .container {
  31.         /* 跟交叉轴的起始线对齐, 本例的条件设置,就是上对齐 */
  32.         align-items: flex-start;
  33.         /* 跟交叉轴的结束线对齐, 本例的条件设置,就是下对齐 */
  34.         /* align-items: flex-end; */
  35.         /* 交叉轴方向居中对齐, 本例的条件设置,就是垂直居中 */
  36.         /* align-items: center; */
  37.       }
  38.     </style>
  39.   </head>
  40.   <body>
  41.     <h2>设置flex交叉轴方向的项目对齐方式</h2>
  42.     <div style="margin-bottom: 20px; font-size: small;">
  43.       注意1:只有flex容器交叉轴方向上还有剩余空间的时候才有效<br />
  44.       注意2:只针对flex容器为单行容器有效.即, flex-wrap: nowrap;
  45.     </div>
  46.     <!-- 1.先写好元素 -->
  47.     <!-- 1.1.flex容器 -->
  48.     <div class="container">
  49.       <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
  50.       <div class="item">1</div>
  51.       <div class="item">2</div>
  52.       <div class="item">3</div>
  53.       <div class="item">4</div>
  54.     </div>
  55.   </body>
  56. </html>

7. 设置flex交叉轴方向的项目对齐方式(多行布局)

  • 使用align-content设置多行flex容器交叉轴的项目对齐方式.其值有:
    • flex-start:跟交叉轴的起始线对齐
    • flex-end:跟交叉轴的结束线对齐
    • center:交叉轴方向居中对齐
    • space-between:两端对齐: 上下两个项目抵到交叉轴的起始线和结束线,中间的项目间距平均分
    • space-around:分散对齐: 各个项目上下分配的间距相等, 且相邻项目的间距不重叠
    • space-evenly:平均对齐: 各个项目上下分配的间距相等, 相邻项目的间距重叠(类似margin)
  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>设置flex交叉轴方向的项目对齐方式</title>
  7.     <style>
  8.       /* 2.设置容器样式 */
  9.       .container {
  10.         width: 100px;
  11.         height: 350px;
  12.       }
  13.       /* 3.设置项目样式 */
  14.       .item {
  15.         width: 100px;
  16.         height: 50px;
  17.         background-color: bisque;
  18.         font-size: 1.5rem;
  19.       }
  21.       /* 4.将容器/父元素设置为flex容器 */
  22.       .container {
  23.         display: flex;
  24.         /* 4.1.主轴以水平方向, 从左到右为例; */
  25.         flex-direction: row;
  26.         /* 4.2.主轴项目布局以折行为例 */
  27.         flex-wrap: wrap;
  28.       }
  29.       /* 5.设置交叉轴方向的项目对齐形式 */
  30.       .container {
  31.         /* 自动拉伸, 默认的对齐方式(要把.item的height属性(line16)去掉才能看到效果) */
  32.         align-content: stretch;
  34.         /* 跟交叉轴的起始线对齐, 本例的条件设置,就是上对齐 */
  35.         /* align-content: flex-start; */
  36.         /* 跟交叉轴的结束线对齐, 本例的条件设置,就是下对齐 */
  37.         /* align-content: flex-end; */
  38.         /* 交叉轴方向居中对齐, 本例的条件设置,就是垂直居中 */
  39.         /* align-content: center; */
  41.         /* 交叉轴方向两端对齐, 上下(本例属性设置,交叉轴为垂直方向,所以为上下)两个项目抵到交叉轴的起始线和结束线,
  42.           中间的项目间距平均分 */
  43.         /* align-content: space-between; */
  44.         /* 交叉轴方向分散对齐, 各个项目上下(本例...)分配的间距相等, 且相邻项目的间距不重叠 */
  45.         /* align-content: space-around; */
  46.         /* 交叉轴方向平均对齐, 各个项目上下(本例...)分配的间距相等, 相邻项目的间距重叠(类似margin) */
  47.         /* align-content: space-evenly; */
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <h2>设置flex交叉轴方向的项目对齐方式</h2>
  53.     <div style="margin-bottom: 20px; font-size: small;">
  54.       注意1:只有flex容器交叉轴方向上还有剩余空间的时候才有效<br />
  55.       注意2:只针对flex容器为多行容器有效.即, flex-wrap为wrap/wrap-reverse时有效;
  56.     </div>
  57.     <!-- 1.先写好元素 -->
  58.     <!-- 1.1.flex容器 -->
  59.     <div class="container">
  60.       <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
  61.       <div class="item">1</div>
  62.       <div class="item">2</div>
  63.       <div class="item">3</div>
  64.       <div class="item">4</div>
  65.     </div>
  66.   </body>
  67. </html>

8. 设置flex主轴方向的项目排序

  • 在flex容器上,使用order属性可以设置所有项目的排序权值.

  • 在项目上,使用order属性可以设置该项目的排序权值.权值可以是正数,0,负数.

    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>设置flex主轴方向的项目排序</title>
    7.   <style>
    8.     /* 2.设置容器样式 */
    9.     .container {
    10.       width: 300px;
    11.       height: 150px;
    12.     }
    13.     /* 3.设置项目样式 */
    14.     .item {
    15.       width: 100px;
    16.       height: 50px;
    17.       background-color: bisque;
    18.       font-size: 1.5rem;
    19.     }
    21.     /* 4.将容器/父元素设置为flex容器 */
    22.     .container {
    23.       display: flex;
    24.       /* 4.1.主轴以水平方向, 从左到右为例; */
    25.       flex-direction: row;
    26.       /* 4.2.设置主轴方向不折行 */
    27.       flex-wrap: nowrap;
    28.     }
    29.     /* 5.设置容器中的项目的默认排序权值(排序规则为:朝主轴布局方向按照排序权值 升序) */
    30.     .container {
    31.       /* 在容器中设置order值,这样所有.item的order值初始都是0 */
    32.       order: 0;
    33.     }
    34.     /* 6.修改单个项目的order值, 实现项目排序顺序调整 */
    35.     /* 6.1.修改第二个.item的order值为2, 根据排序规则, 它就拍到最后了 */
    36.     .item:nth-child(2) {
    37.       order: 2;
    38.     }
    39.     /* 6.2.修改第四个.item的order值为-1, 根据排序规则, 它就排在第一个了(-1比0小) */
    40.     .item:last-child {
    41.       order: -1;
    42.     }
    43.   </style>
    44. </head>
    45. <body>
    46.   <h2>设置flex主轴方向的项目排序</h2>
    47.   <div>排序规则为:朝主轴布局方向按照"排序权值(order样式值)"升序排列</div>
    48.   <!-- 1.先写好元素 -->
    49.   <!-- 1.1.flex容器 -->
    50.   <div class="container">
    51.     <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
    52.     <div class="item">1</div>
    53.     <div class="item">2</div>
    54.     <div class="item">3</div>
    55.     <div class="item">4</div>
    56.   </div>
    57. </body>
    58. </html>

9. 设置flex交叉轴方向的某个项目单独的对齐方式

  • 就是某个项目的个性化设置.

  • 只针对flex容器为单行容器有意义.即, flex-wrap: nowrap; 多行容器，虽然有些单独样式也有效果，但是好像意义不大(个人测试得出的结论)。

    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>设置flex交叉轴方向的某个项目单独的对齐方式</title>
    7.   <style>
    8.     /* 2.设置容器样式 */
    9.     .container {
    10.       width: 300px;
    11.       height: 150px;
    12.     }
    13.     /* 3.设置项目样式 */
    14.     .item {
    15.       width: 50px;
    16.       /* height: 50px; */
    17.       background-color: bisque;
    18.       font-size: 1.5rem;
    19.     }
    21.     /* 4.将容器/父元素设置为flex容器 */
    22.     .container {
    23.       display: flex;
    24.       /* 4.1.主轴以水平方向, 从左到右为例; */
    25.       flex-direction: row;
    26.       /* 4.2.主轴项目布局以不折行为例 */
    27.       flex-wrap: nowrap;
    28.       /* 4.3.设置各项目默认跟交叉轴的起始线对齐, 本例的条件设置,就是上对齐 */
    29.       align-items: flex-start;
    30.     }
    31.     /* 5.设置交叉轴方向的某个项目单独的对齐形式 */
    32.     /* 5.1.第一个项目拉伸显示(要记得把.item的height属性去掉, 或设置为iherit) */
    33.     .item:first-child {
    34.       align-self: stretch;
    35.     }
    36.     /* 5.2.第二个项目在交叉轴方向居中/靠交叉轴结束线显示 */
    37.     .item:nth-child(2) {
    38.       /* 居中 */
    39.       align-self: center;
    40.       /* 靠结束线 */
    41.       /* align-self: flex-end; */
    42.     }
    43.     /* 5.3.第三个项目设置为自动 */
    44.     .item:nth-child(3) {
    45.       align-self: auto;
    46.     }
    47.   </style>
    48. </head>
    49. <body>
    50.   <h2>设置flex交叉轴方向的某个项目单独的对齐方式</h2>
    51.   <div style="margin-bottom: 20px; font-size: small;">
    52.     注意1:只有flex容器交叉轴方向上还有剩余空间的时候才有效<br />
    53.     注意2:只针对flex容器为单行容器有意义.即, flex-wrap: nowrap; 多行容器，虽然有些单独样式也有效果，但是好像意义不大。
    54.   </div>
    55.   <!-- 1.先写好元素 -->
    56.   <!-- 1.1.flex容器 -->
    57.   <div class="container">
    58.     <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
    59.     <div class="item">1</div>
    60.     <div class="item">2</div>
    61.     <div class="item">3</div>
    62.     <div class="item">4</div>
    63.   </div>
    64. </body>
    65. </html>

10. 设置flex主轴方向的项目放大因子

  • 当所有项目在主轴上的长度之和小于容器在主轴上的长度时,可以通过放大因子(flex-grow属性)来计算每个项目拉伸的长度.

    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>设置flex主轴方向的项目放大因子</title>
    7.   <style>
    8.     /* 2.设置容器样式 */
    9.     .container {
    10.       width: 300px;
    11.       height: 150px;
    12.     }
    13.     /* 3.设置项目样式 */
    14.     .item {
    15.       width: 50px;
    16.       height: 50px;
    17.       background-color: bisque;
    18.       font-size: 1.5rem;
    19.       /* 3.1.设置项目默认不放大（initial或0） */
    20.       flex-grow: 0;
    21.     }
    23.     /* 4.将容器/父元素设置为flex容器 */
    24.     .container {
    25.       display: flex;
    26.       /* 4.1.主轴以水平方向, 从左到右为例; */
    27.       flex-direction: row;
    28.       /* 4.2.主轴项目布局以不折行为例 */
    29.       flex-wrap: nowrap;
    30.       /* 4.3.设置项目默认跟主轴的起始线对齐, 本例的条件设置,就是左对齐 */
    31.       justify-content: flex-start;
    32.     }
    33.     /* 5.设置主轴方向的各个项目的放大因子 */
    34.     /* 5.1.设置第一个项目的放大因子是1 */
    35.     .item:first-child {
    36.       flex-grow: 1;
    37.     }
    38.     /* 5.2.设置第二个项目的放大因子是2 */
    39.     .item:nth-child(2) {
    40.       flex-grow: 2;
    41.     }
    42.     /* 5.3.设置最后一个项目的放大因子是3 */
    43.     .item:last-child {
    44.       flex-grow: 3;
    45.     }
    46.     /* 
    47.       5.4.计算：
    48.       没放大前，每个项目的宽度是50px，flex容器主轴长度（本例设置，指width）为300px，
    49.       则，可供放大填充的剩余空间是：300-50*3=150px;
    50.       每个项目获取的放大空间是：(可供放大填充的剩余空间/所有项目放大因子之和)*当前项目放大因子
    51.       则，第一个项目获取的放大空间是：(150px/(1+2+3))*1 = 25px;
    52.       第二个项目获取的放大空间是：(150px/(1+2+3))*2 = 50px;
    53.       第三个项目获取的放大空间是：(150px/(1+2+3))*3 = 75px;
    54.       因此，放大后，第一个项目在主轴上的长度（本例设置，指width）为：50+25=75px;
    55.       第二个项目在主轴上的长度（本例设置，指width）为：50+50=100px;
    56.       第三个项目在主轴上的长度（本例设置，指width）为：50+75=125px;
    57.     */
    58.   </style>
    59. </head>
    60. <body>
    61.   <h2>设置flex主轴方向的项目放大因子</h2>
    62.   <div style="margin-bottom: 20px; font-size: small;">
    63.     注意:只有flex容器主轴方向上还有剩余空间的时候才有效
    64.   </div>
    65.   <!-- 1.先写好元素 -->
    66.   <!-- 1.1.flex容器 -->
    67.   <div class="container">
    68.     <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
    69.     <div class="item">1</div>
    70.     <div class="item">2</div>
    71.     <div class="item">3</div>
    72.   </div>
    73. </body>
    74. </html>

11. 设置flex主轴方向的项目收缩因子

  • 当所有项目在主轴上的长度之和大于容器在主轴上的长度时,可以通过缩小因子(flex-shrink属性)来计算每个项目缩放的长度.
  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>设置flex主轴方向的项目收缩因子</title>
  7.     <style>
  8.       /* 2.设置容器样式 */
  9.       .container {
  10.         width: 180px;
  11.         height: 150px;
  12.       }
  13.       /* 3.设置项目样式 */
  14.       .item {
  15.         width: 100px;
  16.         height: 50px;
  17.         background-color: bisque;
  18.         font-size: 1.5rem;
  19.         /* 3.1.设置项目默认不收缩 */
  20.         flex-shrink: 0;
  21.       }
  23.       /* 4.将容器/父元素设置为flex容器 */
  24.       .container {
  25.         display: flex;
  26.         /* 4.1.主轴以水平方向, 从左到右为例; */
  27.         flex-direction: row;
  28.         /* 4.2.主轴项目布局以不折行为例 */
  29.         flex-wrap: nowrap;
  30.         /* 4.3.设置项目默认跟主轴的起始线对齐, 本例的条件设置,就是左对齐 */
  31.         justify-content: flex-start;
  32.       }
  33.       /* 5.设置主轴方向的各个项目的收缩因子 */
  34.       /* 5.1.设置第一个项目的收缩因子是1 */
  35.       .item:first-child {
  36.         flex-shrink: 1;
  37.       }
  38.       /* 5.2.设置第二个项目的收缩因子是2 */
  39.       .item:nth-child(2) {
  40.         flex-shrink: 2;
  41.       }
  42.       /* 5.3.设置最后一个项目的收缩因子是3 */
  43.       .item:last-child {
  44.         flex-shrink: 3;
  45.       }
  46.       /* 
  47.         5.4.计算：
  48.         没收缩前，每个项目的宽度是100px，flex容器主轴长度（本例设置，指width）为180px，
  49.         则，可供收缩的剩余空间是：100*3 - 180 = 120px;
  50.         每个项目获取的收缩空间是：(可供收缩的剩余空间/所有项目收缩因子之和)*当前项目收缩因子
  51.         则，第一个项目获取的收缩空间是：(120px/(1+2+3))*1 = 20px;
  52.         第二个项目获取的收缩空间是：(120px/(1+2+3))*2 = 40px;
  53.         第三个项目获取的收缩空间是：(120px/(1+2+3))*3 = 60px;
  54.         因此，收缩后，第一个项目在主轴上的长度（本例设置，指width）为：100-20=80px;
  55.         第二个项目在主轴上的长度（本例设置，指width）为：100-40=60px;
  56.         第三个项目在主轴上的长度（本例设置，指width）为：100-60=40px;
  57.       */
  58.     </style>
  59.   </head>
  60.   <body>
  61.     <h2>设置flex主轴方向的项目收缩因子</h2>
  62.     <div style="margin-bottom: 20px; font-size: small;">
  63.       注意:只有flex容器主轴方向上空间不足的时候才有效
  64.     </div>
  65.     <!-- 1.先写好元素 -->
  66.     <!-- 1.1.flex容器 -->
  67.     <div class="container">
  68.       <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
  69.       <div class="item">1</div>
  70.       <div class="item">2</div>
  71.       <div class="item">3</div>
  72.     </div>
  73.   </body>
  74. </html>

12. 设置flex项目在主轴方向所占的长度

  • 假设主轴为水平方向,则影响项目宽度的属性优先级为:max-width/min-width > flex-basis > width;

  • 假设主轴为垂直方向,影响项目高度的属性优先级是否为:max-height/min-height > flex-basis > height,需要自己另写demo来验证.

    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>设置flex主轴方向所占的长度</title>
    7.   <style>
    8.     /* 2.设置容器样式 */
    9.     .container {
    10.       width: 300px;
    11.       height: 150px;
    12.     }
    13.     /* 3.设置项目样式 */
    14.     .item {
    15.       width: 50px;
    16.       height: 50px;
    17.       background-color: bisque;
    18.       font-size: 1.5rem;
    19.     }
    21.     /* 4.将容器/父元素设置为flex容器 */
    22.     .container {
    23.       display: flex;
    24.       /* 4.1.主轴以水平方向, 从左到右为例; */
    25.       flex-direction: row;
    26.       /* 4.2.主轴项目布局以折行为例 */
    27.       flex-wrap: wrap;
    28.       /* 4.3.设置各项目默认跟交叉轴的起始线对齐, 本例的条件设置,就是上对齐 */
    29.       align-items: flex-start;
    30.     }
    31.     /* 5.设置主轴方向所占的长度(可以每个.item单独设置，本例采用统一设置) */
    32.     .item {
    33.       /* 5.1.flex-basis值为auto时， 本例而言，在主轴所占长度=.item的width */
    34.       flex-basis: auto;
    36.       /* 5.2.值为像素值时，主轴所占长度=70px，将忽略.item的width */
    37.       flex-basis: 70px;
    39.       /* 5.3.值为百分比时，主轴所占长度=20%*flex容器主轴方向的长度（本例为width）
    40.         即：20%*300=60px */
    41.       flex-basis: 20%;
    43.       /* 5.4.值为倍数时，（rem)是跟根元素（html）的font-size数值的倍数 */
    44.       flex-basis: 5rem;
    46.       /* 5.5.当设置了min-width/max-width时，若flex-basis的计算值不在min-width或max-width
    47.       范围内，则以min-width/max-width值为主. (若主轴在垂直方向，应该是min-height/max-height？) */
    48.       /* max-width:100px;*/
    49.       /* 超过max-width了，以100px显示 */
    50.       /* flex-basis: 150px; */
    52.       /* 5.6.结论： 在flex容器中，项目的属性优先级(应该是主轴为水平方向时吧？)：max-width/min-width > flex-basis > width*/
    53.     }
    54.   </style>
    55. </head>
    56. <body>
    57.   <h2>设置flex主轴方向所占的长度</h2>
    58.   <!-- 1.先写好元素 -->
    59.   <!-- 1.1.flex容器 -->
    60.   <div class="container">
    61.     <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
    62.     <div class="item">1</div>
    63.     <div class="item">2</div>
    64.     <div class="item">3</div>
    65.     <div class="item">4</div>
    66.   </div>
    67. </body>
    68. </html>

13. 使用项目的flex属性同时设置放大因子，缩小因子和主轴长度

  • 使用flex属性同时设置3个属性.
  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>使用项目的flex属性同时设置放大因子，缩小因子和主轴长度</title>
  7.     <style>
  8.       /* 2.设置容器样式 */
  9.       .container {
  10.         width: 300px;
  11.         height: 150px;
  12.       }
  13.       /* 3.设置项目样式 */
  14.       .item {
  15.         width: 50px;
  16.         height: 50px;
  17.         background-color: bisque;
  18.         font-size: 1.5rem;
  19.       }
  21.       /* 4.将容器/父元素设置为flex容器 */
  22.       .container {
  23.         display: flex;
  24.         /* 4.1.主轴以水平方向, 从左到右为例; */
  25.         flex-direction: row;
  26.         /* 4.2.主轴项目布局以折行为例 */
  27.         flex-wrap: wrap;
  28.         /* 4.3.设置各项目默认跟交叉轴的起始线对齐, 本例的条件设置,就是上对齐 */
  29.         align-items: flex-start;
  30.       }
  31.       /* 5.使用项目的flex属性同时设置放大因子，缩小因子和主轴长度 */
  32.       .item {
  33.         /* ### 1.3 单值语法
  34.           | 序号 | 属性值   | 描述                    |
  35.           | ---- | -------- | ----------------------- |
  36.           | 1    | 整数     | `flex-grow`             |
  37.           | 2    | 有效宽度 | `flex-basis`            |
  38.           | 3    | 关键字   | `initial | auto | none` |
  40.           举例:
  42.           | 序号 | 案例          | 描述              |
  43.           | ---- | ------------- | ----------------- |
  44.           | 1    | `flex: 1`     | `flex: 1 1 auto`  |
  45.           | 2    | `flex: 180px` | `flex: 1 1 180px` |
  46.           | 3    | `initial`     | `flex: 0 1 auto`  |
  47.           | 4    | `auto`        | `flex: 1 1 auto`  |
  48.           | 5    | `none`        | `flex: 0 0 auto`  | */
  49.           /* 三值 */
  50.           /* flex 放大因子 缩小因子 主轴上的长度 */
  51.           /* 放大因子：1；缩放因子：1；主轴上的长度：100px(有放大因子和缩放因子，似乎主轴上的长度没有用了) */
  52.           flex: 1 1 100px;
  54.           /* 大：不放大；小：不缩放；主轴上的长度=width（主轴为水平时） */
  55.           flex: 0 0 auto;
  57.           /* 两值 */
  58.           /* flex 放大因子 主轴上的长度 */
  59.           flex: 0 120px;
  61.           /* 单值 */
  62.           /* 等效于flex: 0 0 0px？四个项目宽度只有标号宽度了 */
  63.           flex: 0;
  64.           /* 等效于flex: 1 1 auto */
  65.           flex: 1;
  66.       }
  67.     </style>
  68.   </head>
  69.   <body>
  70.     <h2>使用项目的flex属性同时设置放大因子，缩小因子和主轴长度</h2>
  71.     <!-- 1.先写好元素 -->
  72.     <!-- 1.1.flex容器 -->
  73.     <div class="container">
  74.       <!-- 1.2.flex容器中的元素, 又叫"项目", 都会被当做行内块元素来处理 -->
  75.       <div class="item">1</div>
  76.       <div class="item">2</div>
  77.       <div class="item">3</div>
  78.       <div class="item">4</div>
  79.     </div>
  80.   </body>
  81. </html>

14. 学习心得

  • flex容器之前没有接触过,本节课的学习过后,发现flex真的让人眼前一亮,原来HTML布局可以这样这样爽,滚TM的浮动/定位.
  • 用flex容器做布局,除开代码量少外,个人感觉是还有个特点,就是方便阅读.使用了浮动,特别是定位,有时要找半天,他的布局代码在哪里.
  • 疑问:flex和grid布局是未来HTML布局的趋势吗?讲来会不会完全代替浮动/定位?浮动个人觉得真的太讨厌了,能不用尽量不用那种.
上一条：CSS Flex弹性盒子认识与实战下一条：前端布局实战-仿php中文网移动端首页
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多