Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex的六个常用属性示例
Blogger Information
Blog 49
fans 0
comment 3
visits 23016
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的六个常用属性示例
P粉479712293
Original
546 people have browsed it

题目一：flex属性一:flex-flow(控制主轴的方向及项是否换行)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <link rel="stylesheet" href="../static/7-2.css">
  8.     <title>flex属性一:flex-flow(控制主轴的方向及项是否换行)</title>
  9. </head>
  10. <body>
  11.     <!-- *.container  按tab-->
  12.     <div class="container">
  13.        <!-- *div.item*3>{item$} -->
  14.        <div class="item">item1</div>
  15.        <div class="item">item2</div>
  16.        <div class="item">item3</div>
  17.     </div>
  18. </body>
  19. </html>

对应的css文件：

  1. /* *初始化三部曲 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* *这样好看一点 */
  8. body{
  9.     padding: 20px;
  10. }
  11. /* *弹性容器 */
  12. .container{
  13.    width: 20em;
  14.     height: 5em;
  15.     border: 1px solid #000;
  16.     /* *该盒子采用flex布局 */
  17.     display: flex;
  18. }
  19. .container>.item{
  20.     width: 10em;
  21.     background-color:coral;
  22.     border: 1px solid #000;
  23. }
  24. .container{![](https://img.php.cn/upload/image/400/676/558/1657759462577788.jpg)
  25.      /* *设置主轴方向 */
  26.      /* flex-direction: row; */
  27.      /* *项不换行 */
  28.      /* flex-wrap: nowrap; */
  29.        /* *项换行 */
  30.        /* flex-wrap: wrap; */
  31.        /* *可简写为这样(简写）(不换行) */
  32.        flex-flow: row nowrap;
  33.        /* *水平方向换行(简写） */
  34.        /* flex-flow: row wrap; */
  35. }

效果图如下：

水平方向不换行：

水平方向换行：

题目二：flex属性二:place-content(主轴上的剩余空间如何在项中进行分配)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <link rel="stylesheet" href="../static/7-2b.css">
  8.     <title>flex属性二:place-content(主轴上的剩余空间如何在项中进行分配)</title>
  9. </head>
  10. <body>
  11.     <!-- *.container  按tab-->
  12.     <div class="container">
  13.        <!-- *div.item*3>{item$} -->
  14.        <div class="item">item1</div>
  15.        <div class="item">item2</div>
  16.        <div class="item">item3</div>
  17.     </div>
  18. </body>
  19. </html>

对应的css文件

  1. /* *初始化三部曲 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* *这样好看一点 */
  8. body{
  9.     padding: 20px;
  10. }
  11. /* *弹性容器 */
  12. .container{
  13.     /* *当不要弹性容器的高宽时 */
  14.    /* width: 20em;
  15.     height: 5em; */
  16.     border: 1px solid #000;
  17.     /* *该盒子采用flex布局 */
  18.     display: flex;
  19. }
  20. .container>.item{
  21.     width: 10em;
  22.     padding: 1em;
  23.     background-color:wheat;
  24.     border: 1px solid #000;
  25. }
  26. .container{
  27.      /* *设置主轴方向 */
  28.      /* flex-direction: row; */
  29.      /* *项不换行 */
  30.      /* flex-wrap: nowrap; */
  31.        /* *项换行 */
  32.        /* flex-wrap: wrap; */
  33.        /* *可简写为这样(水平方向不换行) */
  34.        flex-flow: row nowrap;
  35.        /* *主轴在剩余空间中的分配 */
  36.        /* *剩余空间在左边 */
  37.        place-content: start;
  38.        /* *剩余空间在右边 */
  39.        place-content: end;
  40.        /* *剩余空间在两边 */
  41.        place-content: center;
  42.        /* *项在两边，剩余空间在中间项的两边 */
  43.        place-content: space-between;
  44.        /* *分散对齐 */
  45.        place-content: space-around;
  46.        /* *平均对齐 */
  47.        place-content: space-evenly;
  48. }

效果图如下：

剩余空间在左边：

剩余空间在右边：

剩余空间在两边：

项在两边，剩余空间在中间项的两边：

分散对齐：

平均对齐:

题目三：flex属性三:place-items(剩余空间在交叉轴上的分配)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <link rel="stylesheet" href="../static/7-2c.css">
  8.     <title>flex属性三:place-items(剩余空间在交叉轴上的分配)</title>
  9. </head>
  10. <body>
  11.     <!-- *.container  按tab-->
  12.     <div class="container">
  13.        <!-- *div.item*3>{item$} -->
  14.        <div class="item">item1</div>
  15.        <div class="item">item2</div>
  16.        <div class="item">item3</div>
  17.     </div>
  18. </body>
  19. </html>

对应的css文件：

  1. /* *初始化三部曲 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* *这样好看一点 */
  8. body{
  9.     padding: 20px;
  10. }
  11. /* *弹性容器 */
  12. .container{
  13.     /* *当不要弹性容器的高宽时 */
  14.    /* width: 20em; */
  15.     height: 15em;
  16.     border: 1px solid #000;
  17.     /* *该盒子采用flex布局 */
  18.     display: flex;
  19. }
  20. .container>.item{
  21.     width: 10em;
  22.     height: 5em;
  23.     background-color:wheat;
  24.     border: 1px solid #000;
  25. }
  26. .container{
  27.      /* *设置主轴方向 */
  28.      /* flex-direction: row; */
  29.      /* *项不换行 */
  30.      /* flex-wrap: nowrap; */
  31.        /* *项换行 */
  32.        /* flex-wrap: wrap; */
  33.        /* *可简写为这样(不换行) */
  34.        flex-flow: row nowrap;
  35.        place-content: space-evenly;
  36.       /* *项在交叉轴上的对齐方式之一:向顶部对齐 */
  37.        place-items: start;
  38.         /* *项在交叉轴上的对齐方式之一:向底部对齐 */
  39.        place-items: end;
  40.        /* *项在交叉轴上的对齐方式之一:居中对齐 */
  41.        place-items: center;
  42.        /* *项在交叉轴上的对齐方式之一:上下自动伸展 */
  43.        place-items: stretch;
  44. }

效果图如下：

项在交叉轴上的对齐方式之一:向顶部对齐：

项在交叉轴上的对齐方式之一:向底部对齐：

项在交叉轴上的对齐方式之一:居中对齐：

项在交叉轴上的对齐方式之一:上下自动伸展:

题目四：flex属性四:项的放大因子与收缩因子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <link rel="stylesheet" href="../static/7-2d.css">
  8.     <title>flex属性四：项的放大因子与收缩因子</title>
  9. </head>
  10. <body>
  11.    <!-- *.container  按tab-->
  12.    <div class="container">
  13.     <!-- *div.item*3>{item$} -->
  14.     <div class="item">item1</div>
  15.     <div class="item">item2</div>
  16.     <div class="item">item3</div>
  17.  </div>
  19. </body>
  20. </html>

对应的css文件：

  1. .container .iteml{
  2.     /* *1.默认情况下：不允许放大 允许收缩 当前项的宽度 */
  3.             flex:0 1 auto;
  4.             /* *或 */
  5.             flex:initial;
  6.     /* *2.允许放大因子与收缩因子及当前宽度 */
  7.            flex:1 1 auto;
  8.              /* *或（即全响应） */
  9.              flex:auto;
  10.     /* *3完全失去弹性  */
  11.            flex: 0 0 auto;
  12.            /* *或 */
  13.            flex:none
  14. }

题目五：flex属性五：项ouder值（改变项目在容器中的排列顺序）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="../static/7-2e.css">
  8.     <title>flex属性五：项ouder值:改变项目在容器中的排列顺序</title>
  9. </head>
  10. <body>
  11.     <!-- *.container  按tab-->
  12.     <div class="container">
  13.         <!-- *div.item*3>{item$} -->
  14.         <div class="item">item1</div>
  15.         <div class="item">item2</div>
  16.         <div class="item">item3</div>
  17.      </div>
  18. </body>
  19. </html>

对应的css文件：

  1. /* *初始化三部曲 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* *这样好看一点 */
  8. body{
  9.     padding: 20px;
  10. }
  11. /* *弹性容器 */
  12. .container{
  13.     /* *当不要弹性容器的高宽时 */
  14.    /* width: 20em; */
  15.     height: 15em;
  16.     border: 1px solid #000;
  17.     /* *该盒子采用flex布局 */
  18.     display: flex;
  19. }
  20. .container>.item{
  21.     width: 10em;
  22.     height: 5em;
  23.     background-color:wheat;
  24.     border: 1px solid #000;
  25. }
  26. .container{
  27.      /* *设置主轴方向 */
  28.      /* flex-direction: row; */
  29.      /* *项不换行 */
  30.      /* flex-wrap: nowrap; */
  31.        /* *项换行 */
  32.        /* flex-wrap: wrap; */
  33.        /* *可简写为这样(不换行) */
  34.        flex-flow: row nowrap;
  35.        place-content: space-evenly;
  36.       /* *项在交叉轴上的对齐方式之一:向顶部对齐 */
  37.        place-items: start;
  38.         /* *项在交叉轴上的对齐方式之一:向底部对齐 */
  39.        place-items: end;
  40.        /* *项在交叉轴上的对齐方式之一:居中对齐 */
  41.        place-items: center;
  42.        /* *项在交叉轴上的对齐方式之一:上下自动伸展 */
  43.        place-items: stretch;
  44. }
  45. .container .item:first-of-type{
  46.     /* *默认ouder值为0，ouder值小排前，ouder值大排后(允许负数) */
  47.     background-color: green;
  48.     order: 2;
  49. }

效果图如下：

默认ouder值为0，ouder值小排前，ouder值大排后(允许负数)

题目六：flex属性六：Place-self(控制某一个项目在交叉轴上的对齐)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <link rel="stylesheet" href="../static/7-2f.css">
  8.     <title>flex属性六：Place-self(控制某一个项目在交叉轴上的对齐)</title>
  9. </head>
  10. <body>
  11.     <!-- *.container  按tab-->
  12.     <div class="container">
  13.         <!-- *div.item*3>{item$} -->
  14.         <div class="item">item1</div>
  15.         <div class="item">item2</div>
  16.         <div class="item">item3</div>
  17.      </div>
  18. </body>
  19. </html>

对应的css文件：

  1. /* *初始化三部曲 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* *这样好看一点 */
  8. body{
  9.     padding: 20px;
  10. }
  11. /* *弹性容器 */
  12. .container{
  13.     /* *当不要弹性容器的高宽时 */
  14.    /* width: 20em; */
  15.     height: 15em;
  16.     border: 1px solid #000;
  17.     /* *该盒子采用flex布局 */
  18.     display: flex;
  19. }
  20. .container>.item{
  21.     width: 10em;
  22.     height: 5em;
  23.     background-color:wheat;
  24.     border: 1px solid #000;
  25. }
  26. .container{
  27.      /* *设置主轴方向 */
  28.      /* flex-direction: row; */
  29.      /* *项不换行 */
  30.      /* flex-wrap: nowrap; */
  31.        /* *项换行 */
  32.        /* flex-wrap: wrap; */
  33.        /* *可简写为这样(不换行) */
  34.        flex-flow: row nowrap;
  35.        place-content: space-evenly;
  36.       /* *项在交叉轴上的对齐方式之一:向顶部对齐 */
  37.        place-items: start;
  38.         /* *项在交叉轴上的对齐方式之一:向底部对齐 */
  39.        place-items: end;
  40.        /* *项在交叉轴上的对齐方式之一:居中对齐 */
  41.        place-items: center;
  42.        /* *项在交叉轴上的对齐方式之一:上下自动伸展 */
  43.        /* place-items: stretch; */
  44. }
  45. .container .item:nth-of-type(2){
  46.       background-color: green;
  47.       /* *该项自己向顶部对齐 */
  48.       place-self: start;
  49.        /* *该项自己向底部对齐 */
  50.       place-self: end;
  51. }

效果图如下：

该项自己向顶部对齐：

该项自己向底部对齐：

Correcting teacher：PHPzPHPz

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