flex布局中align-items 和align-content的区别
来源:互联网 发布:小猪收银系统源码 编辑:程序博客网 时间:2024/05/16 14:15
参考资料:http://stackoverflow.com/questions/31250174/css-flexbox-difference-between-align-items-and-align-content
看了很多翻译的技术文档,这一块都讲得模糊不清,看到stackoverflow上有人提问后的回答觉得十分清晰,特来分享,有不当之处欢迎指正。
align-items
The align-items property applies to all flex containers, and sets the
default alignment of the flex items along the cross axis of each flex
line.
align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式。
还有一位回答者的回答也很好,如下
align-items has the same functionality as align-content but the difference is that it works to center every single-line container instead of centering the whole container.
align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中。
如下图
align-content
The align-content property only applies to multi-line flex containers, and aligns the flex lines within the flex container when there is extra space in the cross-axis.
align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐。
感觉这样翻译了之后还是略微有些抽象,不过有一个重点就是多行,
下面我们来写一个小的例子。
<div class="child-1"> <div class="child-2"> </div> <div class="child-2"> </div></div>
html结构如上。
如果child-1的width
设置为100px
,child-2的width
设置为30px
,这样child-2会排列在一排上,具体的css如下
<style type="text/css"> *{ margin:0px; padding: 0px; } div{ border: 1px solid #0f0f0f; } .child-1{ margin: 30px auto; display: flex; width: 100px; height: 60px; justify-content: space-around; align-content: center; } .child-2{ width: 30px; height: 20px; } </style>
最终的结果如下图
所以对于只有一行的flex元素,align-content是没有效果的,如果.child-1
改用align-items:center;
则会达到预期的效果,如下图
但如果变成多行容器
使用align-items
时效果如下
使用align-content
效果如下
- flex布局中align-items 和align-content的区别
- flex布局中align-content和align-items的区别
- CSS中flex布局中align-items 和align-content的区别
- 伸缩盒子子中align-items与align-content和justify-content的区别
- flex布局justify-content属性和align-items,align-self属性
- flex 布局 justify-content:center; align:items; mobile 解决老版box 兼容性问题
- Android布局中margin,padding,align的用法和区别
- css3中 resize 、outline-offset、outline align-items属性 inherit和auto的区别
- text-align 和 align的区别
- align-items
- align和text-align区别
- align和valign的区别
- textalign和align的区别
- HTML5基础加强css样式篇(伸缩容器属性:flex-direction, flex-wrap,flex-flow,align-items,align-content)(五十三)
- align-content
- CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例
- css弹性盒模型属性align-items与justify-content
- valign和vertical-align区别
- hdu_3709_Balanced Number(数位DP)
- kobject的容器kset与hotplug
- WebService入门
- Unity3D 性能优化
- 单例模式
- flex布局中align-items 和align-content的区别
- Unity3D代码及效率优化总结
- Windows下Redis作为Mysql的缓存服务器-读写分离
- 强势团队的五大特性
- iOS开发证书的整理
- java集合入门
- hostapd wpa_supplicant madwifi详细分析(九)——wps原理及实现 一
- Java 理论与实践: 正确使用 Volatile 变量
- 趣写算法系列之--匈牙利算法