布局问题——

最新推荐文章于 2024-05-30 11:27:58 发布

Jayson柴

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量314

点赞数 6

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_45678402/article/details/138977199

版权

在这里插入图片描述

  <div>
    <div id="global">
      <div id="a" class="chunk">
        <div class="round"></div>
      </div>
      <div id="b" class="chunk">
        <div class="round"></div>
      </div>
      <div id="c" class="chunk">
        <div class="round"></div>
      </div>
    </div>
  </div>

  <style>
    #global {
      width: 500px;
      height: 500px;
      display: flex;
      flex-direction: column;
      padding-left: 50px;
      padding-right: 50px;
    }

    .chunk {
      flex: 1;
      background-color: antiquewhite;
      display: flex;
      align-items: center;
    }
    .round {
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background-color: black;
    }
    #a { justify-content: flex-start; }
    #b { justify-content: center; }
    #c {justify-content: flex-end; }
  </style>