search

博客列表 >flex容器的常用属性及其使用案例

flex容器的常用属性及其使用案例

安超
安超原创
2022年10月27日 22:20:09382浏览

1.html中flex容器的常用属性及其使用案例

flex容器的常用属性:
1.flex-direction: (row/column),默认是row
2.flex-wrap:是否换行 nowrap-不换行
3.justify-content:子元素沿主轴方向的的排列方式 flex-stat等
4.align-items:次轴方向是否缩放,如stretch
5.align-content:多上是否换行,如 start等
以上可以简化为:
1.flex-flow :flex-direction flex-wrap
2.place-content : justify-content
3.place-items :aligh-items align-content

  1. place-items
    常用的缩放代码:
    flex : flex-grow flex-shrank flex-basis

    2.flex容器的案例

    a.flex容器内包含三个子元素,居中排列

    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.  <title>flex布局演示</title>
    8. </head>
    9. <body>
    10.   <!-- flex中三个子元素居中显示 -->
    11.  <div class="container">
    12.      <div class="flex">1</div>
    13.      <div class="flex">2</div>
    14.      <div class="flex">3</div>
    15.  </div>
    16.  <style>
    17.      .container{
    18.          height: 15em;
    19.          display: flex;
    20.          background-color: aqua;
    21.          flex-direction: row;
    22.          justify-content: center;
    23.          align-items: center;
    24.      }
    25.      .flex{
    26.          border: 0.1em solid chocolate;
    27.          text-align: center;
    28.          width: 10em;
    29.          height: 10em;
    30.          background-color: brown;
    32.      }
    33.  </style>
    34. </body>
    35. </html>

    <!-- flex中的三个子元素,第一个第三个占25%,第二个占50% --> 

  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.     <title>flex布局演示</title>
  8. </head>
  9. <body>
  10.     <!-- flex中三个子元素居中显示 -->
  11.     <div class="container">
  12.         <div class="flex">1</div>
  13.         <div class="flex">2</div>
  14.         <div class="flex">3</div>
  15.     </div>
  16.     <!-- flex中的三个子元素,第一个第三个占25%,第二个占50% -->
  18.     <br>
  19.     <div class="container_1">
  20.         <div class="divchild">1</div>
  21.         <div class="divchild">2</div>
  22.         <div class="divchild">3</div>
  23.     </div>
  24.     <style>
  25.       body{
  26.         margin: 0;
  27.         padding: 0;
  28.       }
  29.         .container_1{
  30.             display: flex;
  31.             width: 80%;
  32.             h20em;
  33.             background-color: chartreuse;
  34.             justify-content: center;
  35.         }
  36.         .container_1 .divchild{
  37.             border: 1px solid #000;
  38.             text-align: center;
  39.             height: 20em;
  40.         }
  41.         .container_1 .divchild:nth-of-type(1),
  42.         .container_1 .divchild:nth-of-type(3)
  43.         {
  44.             flex:1;
  45.         }
  46.         .container_1 .divchild:nth-of-type(2){
  47.            flex:3;
  48.          }
  50.         .container{
  51.             height: 15em;
  52.             display: flex;
  53.             background-color: aqua;
  54.             flex-direction: row;
  55.             justify-content: center;
  56.             align-items: center;
  57.         }
  58.         .flex{
  59.             border: 0.1em solid chocolate;
  60.             text-align: center;
  61.             width: 10em;
  62.             height: 10em;
  63.             background-color: brown;
  65.         }
  66.     </style>
  67. </body>
  68. </html>
上一条：10.27实例演示隐式网格,行列间隙下一条：em及rem单位的原理及其应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多