当前位置:   article > 正文

flex布局换行导致的隔行排列解决办法(align-content)_flex换行

flex换行

align-content属性是将flex子项作为一个整体起作用,它的基本单位是子项构成的行

只在两种情况下有效果:

①子项多行且flex容器高度固定

②子项单行,flex容器高度固定且设置了flex-wrap:wrap

 

 

主轴为 flex-deriction定义的方向,默认为row

交叉轴跟主轴垂直即为column,反之它们互调


align-content只适用多行的flex容器(子项不止一行时该属性才有效果),它的作用是当flex容器在交叉轴上有多余的空间时,将子项作为一个整体(属性值为:flex-start、flex-end、center时)进行对齐。不同取值的效果如下所示:

 

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
相关标签
  

闽ICP备14008679号