最明显的区别是align-content 适用于多行,align-item 则是适用于单行。
align-content(单行无效)可以设置上对齐、下对齐、居中、拉伸、平分剩余空间;align-item上对齐、下对齐、居中、拉伸。
<style>
.demo {
display: flex;
flex-wrap: wrap;
width: 500px;
height: 500px;
background-color: aqua;
justify-content: space-around;
align-content: space-between;
}
.demo span {
width: 200px;
height: 100px;
background-color: brown;
}
</style>
<div class="demo">
<span>1</span><span>2</span><span>3</span>
<span>4</span><span>5</span><span>6</span>
</div>