flex 垂直方向两端对齐

最新推荐文章于 2024-07-21 21:06:06 发布

夜跑者

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量7.9k

点赞数 3

分类专栏： CSS

本文链接：https://blog.csdn.net/liubangbo/article/details/110269301

版权

CSS 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

有这么一个需求，flex 容器高度固定，其中的2个子项在垂直方向上两端对齐，代码如下：

   <div class="bg">
      <div style="width: 100%;">
        <span>aaaaaaaaa</span>
      </div>
      <div style="width: 100%;">
        <div>bbbbb</div>
        <div>ccccc</div>
      </div>      
    </div>

    <style type="text/css">
      .bg{
        width: 200px;
        height: 300px;
        background-color: gray;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
      }
    </style>

flex-wrap: wrap 和设置子项宽度width：100%就保证了子项占一行，那么align-content属性就会生效，再设置align-content: space-between; 就能保证两端对齐了。

注意这种实现方式还有个必须条件是要设置flex容器的高度