04-align-content 它对于当=单行是没有效果的

标签：around   ace   lex   效果   开发   距离   tween   垂直   元素   

/* 运用在父级元素上  align-content: */
/* align-content: flex-start ; 顶部对齐（与边框线的起点(顶部对齐)） */
/* align-content:center; 垂直方向上居中 */
/* align-content: flex-end交叉轴的终点对齐(与底部对齐)。*/
/* align-content:space-around
运用在父级元素上
第一个子元素距离顶部的距离==最后一个子元素距离底部的距离
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离左右两边的间距都是相等
巧记：around 是四周，说明四周是有间距的。
*/

/*justify-content: space-between;
运用在父级元素上
第一个子元素和最后一个子元素 分别靠在最顶部和最底部
除第一个子元素和最后一个子元素外,第2个,第3个...一直到倒数第二个子元素，这些子元素距离上下两边的间距都是相等
*/

通过对比可以发现align-content:center对单行是没有效果的,而align-items:center不管是对单行还是多行都有效果,而在我们日常开发中用的比较多的就是align-items.
链接：https://www.jianshu.com/p/3b69ec341221

04-align-content 它对于当=单行是没有效果的

标签：around   ace   lex   效果   开发   距离   tween   垂直   元素   

原文地址：https://www.cnblogs.com/IwishIcould/p/11802688.html