对齐无法在CSS Flexbox中工作的内容空间

时间:2018-11-05 08:52:35

标签: html css html5 css3 flexbox

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?

2 个答案:

答案 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的主容器都没有高度或多余的空间,所以它周围会有什么空间。