align-items和align-content区别是什么?

align-items和align-content区别是什么?

align-items和align-content区别是什么?

正在回答

登陆购买课程后可参与讨论,去登陆

1回答

同学你好,

  1. align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

  2. align-conteng属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项

示例: 

http://img1.sycdn.imooc.com//climg/5d468d56000185c705980861.jpg

效果图:每一行都均分剩余的空间在每一个行垂直居中显示

http://img1.sycdn.imooc.com//climg/5d468d7a0001115019200747.jpg

使用align-content

http://img1.sycdn.imooc.com//climg/5d468d92000126ae04310239.jpg

效果图, 所有均分剩余的空间, 在整体垂直居中显示

http://img1.sycdn.imooc.com//climg/5d468db60001dde119200731.jpg

综上, 可以简单理解两者的区域就是align-item是针对单行, align-content可以针对多行, 如果需要同时对多行进行操作, 可以使用这个属性

同学也可以结合示例,自己下去测试一下, 结合代码实现的效果, 加深自己的理解

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
3.WebAPP开发与小程序
  • 参与学习           人
  • 提交作业       622    份
  • 解答问题       6815    个

微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师