flex 垂直方向 两端对齐

flex 垂直方向 两端对齐

 

 

有这么一个需求，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容器的高度
————————————————
版权声明：本文为CSDN博主「夜跑者」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/liubangbo/article/details/110269301