Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex弹性布局主要用法
Blogger Information
Blog 57
fans 3
comment 0
visits 60551
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
flex弹性布局主要用法
岂几岂几
Original
731 people have browsed it

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布局的趋势吗?讲来会不会完全代替浮动/定位?浮动个人觉得真的太讨厌了,能不用尽量不用那种.
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：以后的布局,绝对是越来越简单的, 越来越人性的, 但这种简单是相对的... 之前用浮动布局是没办法,hack方式, 后来才有了专用于布局的技术例如flex,grid, 以后还肯定还会出现更加牛逼先进的方式, 准备订个头套吧, 发量会越来越少
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