flex..................

在父级上设置display: flex;

父级称之为弹性容器;子级称之为弹性盒子。

如果父级没有设置高,则由子级来撑开;如果子级没有设置高,则子级的高和父级一样;

      (在二者之间有一个没有设置高,则继承另一个的高)

属性名:justify-content;<--主轴对齐方式-->  ----(水平排列)

附带的属性值有:

flex-start;默认值从左到右  flex-end;   从右到左   center;水平居中

注:上三个如果部设置外边距或内边距,那么弹性盒子就会挨着

space-between;(均匀排列,间距在弹性盒子之间)

 space-around(均匀排列,间距在弹性盒子两侧)

(注:虽然这个也是均匀排列,但两个弹性盒子之间的间距是弹性盒子一侧间距的两倍。)

space-evenly(均匀排列,弹性盒子和容器间距相等)

属性名:align-items<--侧轴对齐方式-->  -----垂直排列(给弹性容器设置)控制所有弹性盒子

               align-self          单独控制某一个弹性盒子(给弹性盒子设置)

附带的属性值有:

stretch;拉伸      弹性盒子在侧轴方向没有尺寸才能拉伸

center;垂直居中

flex-srart;弹性容器左上角排列

flex-end;弹性容器左下角排列

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值