flex 垂直方向 两端对齐

flex 垂直方向 两端对齐_第1张图片

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

   
aaaaaaaaa
bbbbb
ccccc

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

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

 

你可能感兴趣的:(CSS)