将不在css flexbox中工作的内容空间对齐

Question

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-contant:space-aween也不起作用。为什么它不起作用？有人能帮助解决css flexbox中的这个问题吗？对齐内容：周围的空间和对齐内容：之间的空间？

Answer 1

由于flexbox没有任何子项的高度或任何填充，所以无法在之间对齐内容：空格。

flexbox将对齐内容：如果它有任何高度或填充的子对象，则会增加拇指的高度。

justify内容是正确的，因为它有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>

Answer 2

我认为所有div的主容器都没有高度或额外的空间，那么它周围会有什么空间。