body {
margin: 0;
padding: 0;
box-sizing: border-box;
background: url("assets/images/bg.jpg")no-repeat top;
background-size: cover;
background-attachment: fixed;
}
.category-container {
width: 87%;
margin: 3em auto;
}
.category-container h2 {
margin: 0 auto;
background-color: #fc0321;
color: #fff;
text-align: center;
text-shadow: 2px 2px 4px #000;
font-weight: 400;
padding: 1%;
width: 15%;
}
.thumb {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
.thumb div {
width: 36.8em;
height: 22em;
}
.thumb img {
width: 36.8em;
height: 22em;
}
<section class="category-container">
<h2>Category</h2>
<div class="thumb">
<div><img src="assets/images/header1.jpg" /></div>
<div><img src="assets/images/header2.jpg" /></div>
<div><img src="assets/images/header3.jpg" /></div>
<div><img src="assets/images/header4.jpeg" /></div>
</div>
</section>
我在 css flexbox.justify-content: space-around 中有问题,但 align-content: space-around 不起作用,align-content: space-between 也不起作用。为什么它不起作用?有人可以帮助解决 css flexbox align-content: space-around 和 align-content: space-between 中的这个问题吗?
最佳答案
它不工作 align-content:space-between 因为 flexbox 没有高度或任何 child 的任何填充。
如果 flexbox 有任何会增加拇指高度的高度或填充,flexbox 将执行 align-content:space-between。
证明内容是正确的,因为它有 100% 的宽度来做间隔。
我已经给出了拇指高度,现在看到它正在对齐内容中心。
body {
margin: 0;
padding: 0;
box-sizing: border-box;
background: url("assets/images/bg.jpg")no-repeat top;
background-size: cover;
background-attachment: fixed;
}
.category-container {
width: 87%;
margin: 3em auto;
}
.category-container h2 {
margin: 0 auto;
background-color: #fc0321;
color: #fff;
text-align: center;
text-shadow: 2px 2px 4px #000;
font-weight: 400;
padding: 1%;
width: 15%;
}
.thumb {
width: 100%;
height:3500px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
}
.thumb div {
width: 36.8em;
height: 22em;
}
.thumb img {
width: 36.8em;
height: 22em;
}
<section class="category-container">
<h2>Category</h2>
<div class="thumb">
<div><img src="assets/images/header1.jpg" /></div>
<div><img src="assets/images/header2.jpg" /></div>
<div><img src="assets/images/header3.jpg" /></div>
<div><img src="assets/images/header4.jpeg" /></div>
</div>
</section>
关于html - 围绕在 css flexbox 中不起作用的内容空间对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53151053/