flex 布局中 align-content 和 align-items 的区别

刚接触时，感觉 align-items 就是 align-content 的强化版。一个支持单行，同时支持多行；另一个只支持多行。但是并不符合常理，对比之后发现还是有些没有被描述清楚的差异。

定义还不知道的，出门左转 MDN，随便浪。

此布局值为 flex-end

多行容器之：align-items

以每一行为单位，行下对齐

多行容器之：align-content

以整个容器为单位，容器下对齐

参考：萤火虫塔莉

原文地址：https://www.cnblogs.com/megamouthRen/p/11549967.html

时间： 2024-11-01 16:00:43

flex 布局中 align-content 和 align-items 的区别的相关文章

flex布局中 align-items 和 align-conten t的区别

参考资料: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, a

flex布局中flex-basis|flex-grow|flex-shrink

flex布局中flex-basis|flex-grow|flex-shrink flex-grow.flex-shrink.flex-basis这三个属性的作用是:在flex布局中,父元素在不同宽度下,子元素是如何分配父元素的空间的. 其中,这三个属性都是在子元素上设置的.注:下面讲的父元素,指以flex布局的元素(display:flex). flex-basis 该属性来设置该元素的宽度.当然,width也可以用来设置元素宽度.如果元素上同时设置了width和flex-basis,那么fle

flex布局中transform出错

在flex布局下,若应用transform 的动画的子元素没有使用进行定位,则动画过程中,子元素将相对display:flex的元素进行static定位动画结束后位置正常: 修复代码只需要position:relative html伪代码 <flex> <div> <div> <div> <animation> css伪代码 animation{ position:relative; }

[ css 弹性盒子模型 flex-basis 属性 ] 弹性盒子模型flex布局中flex-basis属性讲解及实例演示的区别

设置或检索弹性盒伸缩基准值: 如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间计算值 – 绝对数:在flex-container主方向大小不足以容纳flex items的flex-basis总和时,浏览器会自动缩小它们实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <

[ css 弹性盒子模型 flex-shrink 属性 ] 弹性盒子模型flex布局中flex-shrink属性讲解及实例演示的区别

根据弹性盒子元素所设置的收缩因子作为比率来收缩空间实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>-webkit-flex-basis_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" conten

[ css 弹性盒子模型 flex-grow 属性 ] 弹性盒子模型flex布局中flex-grow属性讲解及实例演示的区别

根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>-webkit-flex-basis_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" cont

[ css 弹性盒子模型 align-content 属性 ] 弹性盒子模型flex布局中align-content属性讲解及实例演示的区别

说明: 本属性适用于:多行的弹性盒模型容器当伸缩容器的侧轴还有多余空间时,本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式,这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似.请注意本属性在只有一行的伸缩容器上没有效果实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /&

[ css 弹性盒子模型 align-item 属性 ] 弹性盒子模型flex布局中align-item属性讲解及实例演示的区别

说明: 本属性适用于:flex容器定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式实例: <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>align-items_CSS参考手册_web前端开发参考手册系列</title> <meta name="

flex布局中flex-shrink的计算规则

下面代码来自MDN html部分: <p>the width of content is 500px, flex-basic of flex item is 120px.</p> <p>A, B, C are flex-shrink:1. D and E are flex-shrink:2</p> <p>the width of D is not the same as A's</p> <div id="content

[ css 弹性盒子模型 align-content align-items属性 ] 弹性盒子模型flex布局中align-items 和align-content属性讲解及实例演示的区别

align-items align-items属性适用于所有的flex容器,它是用来设置每个flex元素在侧轴上的默认对齐方式,还有一位回答者的回答也很好,如下: align-items和align-content有相同的功能,不过不同点是它是用来让每一个单行的容器居中而不是让整个容器居中 align-content align-content属性只适用于多行的flex容器,并且当侧轴上有多余空间使flex容器内的flex线对齐,感觉这样翻译了之后还是略微有些抽象,不过有一个重点就是多行, 下面