Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 前端作业-flex布局
Blogger Information
Blog 28
fans 0
comment 0
visits 15757
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
551 people have browsed it
  • 实例演示flex容器与项目中常用的属性,并写出功能

  • 图例

  • HTML文件

    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-flow</title>
    8.   <link rel="stylesheet" href="./demo11.css">
    9.   <style>
    11.   </style>
    12. </head>
    13. <body>
    14.      <div class="container">
    15.          <dir class="itm">元素块1</dir>
    16.          <dir class="itm">元素块2</dir>
    17.          <dir class="itm">元素块3</dir>
    18.          <dir class="itm">元素块4</dir>
    19.          <dir class="itm">元素块5</dir>
    20.          <dir class="itm">元素块6</dir>
    22.      </div>
    23. </body>
    24. </html>

  • CSS文件
    ```
    *{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    }
    .container{
    display: flex;
    width: 40rem;
    height: 15em;
    border: 1px solid #000;

    /主轴变横向/
    / flex-direction: column; /
    /换行显示/
    / flex-flow: row wrap; /

    /剩余空间位于所有项目的左边/
    / justify-content: flex-start;
    /    剩余空间位于所有项目的右边/
    /    justify-content:flex-end;
    /剩余空间位于所有项目的中边/
    /* justify-content: center;

    1. /*剩余空间两端对齐*/

    /justify-content: space-between;
    /    剩余空间分散对齐/
    /    justify-content: space-around;
    /剩余空间平均对齐/
    /*justify-content: space-evenly;

    /交叉轴对齐：交叉轴剩余空间/
    /align-items: stretch;/

    /*justify align-items: flex-start; 

    1. align-items: flex-end;
    2. align-items:center;*/

    }
    .container > .itm{
    height: 10em;
    background-color: lightcyan;
    border: 1px solid #000;
    }

}

```

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
1 comments
大佬别动我昵称 2021-07-10 15:47:01
为什么是绿色
1 floor
Author's latest blog post