Community Learn Tools Library Leisure
search
English
Home > List of blog posts > flex布局-实践
Blogger Information
Blog 28
fans 0
comment 0
visits 15752
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
550 people have browsed it

— flex 布局 属于弹性布局

  • flex 有主轴 和交叉轴和剩余空间的变换，可以随时可以让字元素以设置宽度来进行缩小和放大或者自适应
  • 图例：

-代码区

  1. *{
  2.     box-sizing: border-box;
  3. margin: 0;
  4. padding: 0;
  5. }
  6. .container{
  7.     display: flex;
  8.     width: 40rem;
  9.     height: 15em;
  10.     border: 1px solid #000;
  12.     /*主轴变横向*/
  13.      /* flex-direction: column; */
  14.      /*换行显示*/
  15.      /* flex-flow: row wrap; */
  17.      /*剩余空间位于所有项目的左边*/
  18.     /* justify-content: flex-start;
  19.      /*剩余空间位于所有项目的右边*/
  20.      /*justify-content:flex-end;
  21.      /*剩余空间位于所有项目的中边*/
  22.     /* justify-content: center;
  23.       /*剩余空间两端对齐*/
  24.      /*justify-content: space-between;
  25.      /*剩余空间分散对齐*/
  26.      /*justify-content: space-around;
  27.      /*剩余空间平均对齐*/
  28.      /*justify-content: space-evenly;
  30.      /*交叉轴对齐：交叉轴剩余空间*/
  31.      /*align-items: stretch;*/
  33.      /* align-items: flex-start;  */
  34.      /* align-items: flex-end;  */ 
  35.      /* align-items:center;  */
  37.     }
  38. .container > .itm{
  39.     height: 10em;
  40.     background-color: lightcyan;
  41.     border: 1px solid #000;
  42. }
  43. .container {
  44.     /* flex-direction: row nowrap; */
  45.     /* flex-wrap: nowrap;*/
  46.     /* flex-direction: row;  */
  49.     /* align-items:flex-start; */
  50.     /*flex-direction:row-reverse;*/
  51.     /* flex-direction:column-reverse;  */
  53. }

— 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>Document</title>
    8. <style> .container{
    9.            height:20rem;
    10.            border: 1px  solid;
    11.            display: flex;        
    12.    }
    13.    .container > .item {
    14.        width: 20rem;  
    15.        background-color: lightcyan;
    16.        border: 1px solid;
    17.        /*项目的计算尺寸，优先级大于width */
    18.        flex-basis: 25rem;
    19.        /*禁止收缩*/
    20.        /* flex-shrink: 1;
    21.        /* 默认允许收缩 */
    22.        /*flex-grow:1;
    23.       flex-grow: 0; */
    24.       /*flex默认：禁止放大，允许收缩，宽度自动*/
    25.       /* flex: 0 1 auto;   */
    26.       /*flex 允许放大 允许缩小  宽度自动*/
    27.      /*flex: 1 0 auto;*/
    29.      /*单值语法*/
    30.      /* flex: 1; */
    31.    }
    33.    .container > .item:first-of-type, .container > .item:last-of-type{
    34.        background-color: lightgreen;
    35.        flex: 0 1 auto;
    36.    }
    37.    .container > .item.two{
    38.        background-color: violet;
    39.        align-self: center;
    40.        align-self:stretch;
    41.    }
    42.    </style>
    43. </head>
    44. <body>
    45.    <div class="container">
    46.        <div class="item">item1</div>
    47.        <div class="item two">item2</div>
    48.        <div class="item">item3</div>
    49.        <!-- <div class="item">item4</div> -->
    50.    </div>
    51. </body>
    52. </html>
Correcting teacher：天蓬老师天蓬老师

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