Flexbox not adding top padding but adds bottom padding

Question

so I am trying to use a flexbox to space evenly objects inside of it. The problem is that the flexbox adds space to the bottom of element but not at the top.

Here is the code of the section, the divs inside of it are the elements that I would like to space evenly inside it.

#Items {
    width: 100%;
    height: 800px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;

}

#Items a {
    text-decoration: none;
}

/* Classes */

.Box {
    width: 320px;
    height: 100px;
    background-color: #f2f2f2;
}

.Box h3 {
    font-family: 'Roboto', serif;
    font-size: 22px;
    color: #111;
}

<section id="Items">
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
</section>

The divs are being indeed spaced evenly inside the section with the flexbox EXCEPT that there is no space between the top of the first div in the flexbox and the top of the flexbox, but there is space between the bottom of the last div box and the bottom of the flexbox. Is there a clean way to fix this? I don't want to add padding or margin to my fist div box because I'd like to turn the div box into an anchor(or link) later on so users can click it and navigate to other parts of the website.

Thanks!

also, you can add `margin: auto` to `.Box`. – s.kuznetsov Jan 28 '21 at 17:10 — s.kuznetsov, Jan 28 '21 at 17:10

score 1 · Accepted Answer · answered Jan 28 '21 at 17:08

To vertical align the items, so there is an even margin above and below, use

align-items: center;

#Items {
    width: 100%;
    height: 800px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    border: 1px solid black;
    align-items: center;
}

#Items a {
    text-decoration: none;
}

/* Classes */

.Box {
    width: 320px;
    height: 100px;
    background-color: #f2f2f2;
}

.Box h3 {
    font-family: 'Roboto', serif;
    font-size: 22px;
    color: #111;
}

<section id="Items">
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
    <div class="Box">
        <h3>Case</h3>
    </div>
</section>

score 0 · Answer 2 · answered Jan 28 '21 at 17:15

Your flex container is in row direction.

That means that justify-content: space-around will pad the horizontal edges.

If you want the padding on the vertical edges, add align-content: space-around.

#Items {
  height: 800px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: space-around;  /* new */
}

#Items a {
  text-decoration: none;
}

/* Classes */

.Box {
  width: 320px;
  height: 100px;
  background-color: #f2f2f2;
}

.Box h3 {
  font-family: 'Roboto', serif;
  font-size: 22px;
  color: #111;
}

<section id="Items">
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
  <div class="Box">
    <h3>Case</h3>
  </div>
</section>

score 0 · Answer 3 · answered Jan 28 '21 at 17:29

I think you need of center ("h3") vertically that's inside the divs inside the section!

if I got that right then you need to add the following to ".Box" , that will align them vertically display: flex; align-items: center;, if you also need to align them horizontally then add "justify-content: center;"

.Box {
    width: 320px;
    height: 100px;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
}

Flexbox not adding top padding but adds bottom padding

3 Answers3