flex弹性盒子相关知识

Mengxy灬

已于 2022-05-07 09:28:28 修改

阅读量79

点赞数

文章标签： html5

于 2022-04-24 20:19:41 首次发布

本文链接：https://blog.csdn.net/qq_47548037/article/details/124390879

版权

今天复习了一下弹性盒子，太久都忘了

效果图：

代码：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

      .box {

        height: 500px;

        width: 400px;

        border: 1px solid black;

        margin: 100px auto;

        display: flex;

        /*主轴改为竖直方向*/

        flex-direction: column;



        /*  

        调整主轴对其方向：justify-content：

           1.sapce-between  两端对齐

           2.space-around   距离环绕

           3.flex-start     左对齐

           4.flex-end       右对齐  

           5.center         中间显示

        */

        justify-content: space-around;

        /*

        侧轴方向：align-items

           1.flex-start     左对齐

           2.flex-end       右对齐  

           3.center         中间显示

         */

        align-items: center;

      }

      .box div {

        width: 50px;

        height: 50px;

        border: 1px solid blue;

      }

    </style>

  </head>

  <body>

    <div class="box">

      <div></div>

      <div></div>

      <div></div>

      <div></div>

      <div></div>

    </div>

  </body>

</html>