search

博客列表 >flex的六个常用属性示例

flex的六个常用属性示例

P粉479712293
P粉479712293原创
2022年07月14日 10:17:28547浏览

题目一：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. }

效果图如下：

该项自己向顶部对齐：

该项自己向底部对齐：

上一条：网格布局grid的9个属性下一条：怎么把网页数据快速转换成excel表格？
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多