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中遇到问题:环绕效果很好,但是align-content:环绕效果不起作用,align-content:两者之间的间距也不起作用,为什么它不起作用?有人可以在CSS Flexbox中解决此问题吗?align-content:space-around和align-content:space-between?
答案 0 :(得分:0)
由于flexbox没有高度或任何子代的填充,因此align-content:space-between无法正常工作。
如果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>
答案 1 :(得分:0)
我认为所有div的主容器都没有高度或多余的空间,所以它周围会有什么空间。