盘点flex布局常见属性及适用场景

flex布局原理:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式

下面按照次序依次介绍flex常用的属性:flex-direction,flex-wrap,justify-content,align-items,align-content,flex,align-self

1.flex-direction决定主轴的排列方向:row(默认值)|row-reverse|column|column-reverse,示意图如下:

(1)row(默认值):主轴为水平方向,自左至右

(2)row-reverse:主轴为水平方向,自右至左

(3)column:主轴为垂直方向,自上而下

(4)column-reverse:主轴为垂直方向,自下而上

2.弹性元素永远沿主轴排列,那么如果主轴排不下,通过flex-wrap决定容器内项目是否可换行

默认是flex-wrap:no-wrap(不换行),当盒子放不下时也不会溢出,而是盒子伸缩

 效果:父盒子宽度不够,设置flex-wrap换行显示

 3.justify-content属性,定义了项目在主轴上的对齐方式

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

(2)flex-end:右对齐

(3)center:居中

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

(5)space-around:两个项目两侧间隔相等

html结构:

css代码:

显示效果:依次是左对齐,右对齐,居中对齐,两端对齐及均匀分布

4.align-items设置侧轴上的子元素排列方式(单行)

html:

 css:

 效果显示:

 5.align-content设置侧轴上的子元素排列方式(多行)

html:

css:

 6.flex属性:分配父盒子剩余空间,这个属性是给子盒子设置的,后面的数字代表瓜分剩余空间的份数

7.align-self给单个子盒子自身设置侧轴对齐方式,其他兄弟位置保持不变.

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值