align content space around not working in css flexbox

user_9612518 0
Viewed 2479

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>

I have problem in css flexbox.justify-content: space-around in working well but align-content: space-around is not working and align-content: space-between is also not working.Why is it not working?Can somebody help with this problem in css flexbox align-content: space-around and align-content: space-between?

flexbox css html
2 Answers

It is not working align-content:space-between because the flexbox has no height or any padding of any child.

the flexbox will do align-content:space-between if it would have any height or padding of child which would increase the height of thumb.

justify content is going right because it has width 100% to do space-between.

i have given the thumb height and now see it is doing align-contents center. 

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>

Admin1

i think the main container of all div has no height or extra space so what would it space around.

Admin1
Related