【代码】flex布局中字符超出范围折行问题

2022-12-16 16:28:06  阅读 178 次 评论 0 条

1.flex-direction

说明:这个属性最常用,决定了主轴的横竖及走向,也就是说决定了box内部的item的摆放顺序

取值说明备注
row横向从左到右默认是这个
row-reverse横向从右到左
column纵向从上到下
column-reverse纵向从下到上

代码示例:

.box{
  display:flex;
  flex-direction:row;
}

2.flex-warp

说明:对于item排列成一行,超出box的范围之后,该如何处理?默认值是nowrap。


取值说明备注
nowrap不拆行或不拆列默认
wrap拆行或拆列推荐
wrap-reverse拆行或拆列,以相反的顺序

代码示例:

.box{
  display:flex;
  flex-wrap:wrap;
}

3.flex-flow

说明:这个就是上面那两个的结合,写在一个属性里。

示例:

flex-flow:row wrap;

相当于:

flex-direction:row;
flex-wrap:wrap;



微信扫码查看本文
本文地址:https://www.yangguangdream.com/?id=2221
版权声明:本文为原创文章,版权归 编辑君 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?