align-content与align-items的区别

本文作者因混淆弹性布局中align-content与align-items概念,特意进行区分。先介绍交叉轴、主轴,以及多行容器和单行容器的划分。通过初始代码进行测试,发现align-content对单行无效果,而align-items对单行和多行都有效果,日常开发中align-items使用较多。

在之前使用弹性布局的时候,align-content与align-items的概念混淆不清,自己特意写了一下来区分.

1.首先要知道:交叉轴就是Y轴,另一个就是主轴

2.多行容器与单行容器:

弹性容器可以划分为多行容器和单行容器,划分方式如下:

(1).容器的flex-wrap属性值为wrap或者wrap-reverse的容器是多行容器。

(2).只要进行上述属性设置,即便容器中只有一个行项目,也是多行容器。

(3).多行容器中,每一行在交叉轴方向上的尺寸,恰好能够包裹住项目。

(4).当行容器中,只有一个行,此行在交叉轴上的尺寸等同于容器在交叉轴上的尺寸。

多行容器行高图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/171035v9li0pu9llw0p997.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

单行容器行高图示如下:

a:3:{s:3:\"pic\";s:43:\"portal/201904/16/171044wd9tc10cn3de6b0o.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面图示已经很清晰的说明了两类容器中的行高,不再进一步说明。

 

以下是我的初始代码:

初始代码

效果是这样子的:

 

初始的效果

测试一:

那么  在.bigbox中添加align-items:center以后,侧轴居中了,效果如下:

 

align-items:center

在.bigbox中添加align-content:center以后,没有发生改变:如下:

align-content:center

由此  我们可以看到align-content对单行是没有效果的.

测试二:

我们把这两个盒子变成两行(给.box1加一个margin-right:100px; 给.bigbox加一个 flex-wrap: wrap;属性让这两个小盒子两行显示)

如下图:

两行显示初始图

在.bigbox中添加align-items:center以后,侧轴居中了,效果如下:

align-items: center;

在.bigbox中添加align-content:center以后,效果如下,

align-content:center

那么  通过对比可以发现align-content:center对单行是没有效果的,而align-items:center不管是对单行还是多行都有效果,而在我们日常开发中用的比较多的就是align-items.



作者:喵儿_喵儿_喵
链接:https://www.jianshu.com/p/3b69ec341221
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值