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

时间 2020-06-02

标签 align content 对于单行没有效果繁體版

原文原文链接

/* 运用在父级元素上 align-content: 它通产与子元素的div{margin:10px 一块儿联合使用 }*/flex

ps==>用在子项出现换行的状况下，并是多行的状况下哦。运用在子项在侧轴上的排列方式。spa

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

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

justify-content 一般和子元素中的div{margin:10px} 联合使用的（重点重点） code

经过对比能够发现align-content:center对单行是没有效果的,而align-items:center无论是对单行仍是多行都有效果,而在咱们平常开发中用的比较多的就是align-items.

blog

#main { width: 800px; height: 300px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; align-content: center; } #main>div{ width: 150px; height: 100px; background: #0099FF;  margin: 10px; } </style> </head> <body> <div id="main"> <div style="background-color:coral;">11</div> <div style="background-color:lightblue;">22</div> <div style="background-color:pink;">33</div> <div style="background-color:olive;">4</div> <div style="background-color:coral;">55</div> <div style="background-color:lightblue;">66</div> </div>

align-content: flex-start;开发

align-content: flex-end;it

align-content: space-around;class