Fiex布局

row(默认值):主轴为水平方向,起点在左端

row-reverse:主轴为水平方向,起点在右端

column:主轴为垂直方向,起点在上沿

column-reverse:主轴为垂直方向,起点在下沿

flex-start:默认值,表示项目对齐到主轴起点,项目间不留空隙

flex-end:项目对齐到主轴终点,项目间不留空隙

center:项目在主轴上居中排列,项目间不留空隙。主轴上第一个项目离主轴起点的距离等于最后一个项目离主轴终点的距离

space-between:两端对齐,两端的项目分别靠向容器的两端,其他项目之间的间隔相等

space-around:每个项目之间的距离相等,第一个项目离主轴起点和最后一个项目离终点的距离为中间项目间距的一半

center:项目在交叉轴的中间位置对齐

flex-start:项目顶部与交叉轴起点对齐

flex-end:项目底部与交叉轴终点对齐

baseline:项目的第一行文字的基线对齐

nowrap:默认值,表示不换行,如果单行内容过多,项目宽度可能会被压缩

wrap:当容器单行容不下所有项目时允许换行排列

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值