flex布局

一、flex-direction:属性决定主轴的方向(即项目的排列方向)。

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

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

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

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

二、flex-wrap:默认排在一行,如果一条轴线排不下,如何换行。

1.nowrap(默认):不换行。

2.wrap:换行,第一行在上方。

3.wrap-reverse:换行,第一行在下方。

三、flex-flow:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。

四:justify-content:属性定义了项目在主轴上的对齐方式。

1.flex-start(默认值):左对齐

2.flex-end:右对齐

3.center: 居中

4.space-between:两端对齐,项目之间的间隔都相等。

5.space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

五、align-items:

六、align-content:

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值