Vertically spacing items in a div (flexbox space-around not working..)

Question

Here is an image of my side nav. I'd like to have more control over evenly distributing these items in the nav (there is more room on top and bottom than is show in the image).

Image of the side nav elements, with grid and Materialize formatting things correctly.

Here the relevant code (using grid, which is not included here, as well as the "grid" module from Materialize, which gives me some helps for formatting text etc.):

.nav-side-wrapper {
  display: flex;
  flex-direction: column;
}

.nav-side {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  width: 100%;
}

.side-nav-links {
    border-bottom: 2px solid;
}

<nav class="valign-wrapper nav-side-wrapper">
        <div class="container nav-side">
            <ul class="side-nav-links center-align">
                <li><a href="learning">Learning Hub</a></li>
                <li><a href="resources">Resources</a></li>
                <li><a href="glossary">Glossary</a></li>
            </ul>
            <ul class="center-align side-buts">
                <li><button class="but-test">Click me!</button></li>
                <li><button class="but-test">Click me!</button></li>
                <li><button class="but-test">Click me!</button></li>
            </ul>
        </div>
    </nav>

I've tried all combinations, removing the valign-wrapper and center-align helpers from Materialize, moving the flex code (display, flex-direction, justify-content, etc.) around, trying seemingly every combination between which lines go where, between .nav-side-wrapper and .nav-side.

It's really stumping me... Any help would be majorly appreciated.

Ideally, I'd like the links to be spaced along the top half of the nav, and the buttons evenly spaced along the bottom half of the nav.

The image contains no code whatsoever. It's just my elements. Edited for clarity. But thanks for your contribution. — , Apr 16 '19 at 00:22
Make sure your container has some height beyond the height of the content, or there is no extra space to distribute. https://stackoverflow.com/q/55674798/3597276 — Michael Benjamin, Apr 16 '19 at 11:56

MichaelvE · Answer 1 · 2019-04-16T06:18:10.307

A solution to this is to set the flex property to 1 on the flex child. When this property is set on a flexible item, it will make all the items the same length. If you add padding to your top and bottom of the flex child as well, you can play around with the perception of the height. The snippet shows the parent flex to be a height of 400px. You can play around with the height to see how it retains the space-around spacing.

.nav-side-wrapper {
  height: 400px;
  width: 30%;
  display: flex;
  flex-direction: column;
  background-color: pink;
  justify-content: space-around;
}

.nav-side {
  display: flex;
  -webkit-flex: 1;
  /* Safari 6.1+ */
  -ms-flex: 1;
  /* IE 10 */
  flex: 1;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 10% 0px;
}

hr {
  border: none;
  background-color: black;
  height: 2px;
  width: 90%;
}

<nav class="nav-side-wrapper">
  <div class="nav-side">
    <div><a href="learning">Learning Hub</a></div>
    <div><a href="resources">Resources</a></div>
    <div><a href="glossary">Glossary</a></div>
  </div>
  <div>
    <hr>
  </div>
  <div class="nav-side">
    <div><button class="but-test">Click me!</button></div>
    <div><button class="but-test">Click me!</button></div>
    <div><button class="but-test">Click me!</button></div>
  </div>
</nav>

Thank you! One follow up, though. When I use your code as provided, it doesn't span the full length of the nav sidebar - [here's an example of that](https://imgur.com/biUqp3j). When I remove the height value in .nav-side-wrapper and slightly tweak a couple of things, it spans the full length - [like this](https://imgur.com/zXCI50t) - but it's too spread out. Are you aware of a way for me to control the space around/between these elements? Basically so there is less empty space between the topmost link and the top of the nav, and the bottom button and the bottom of the nav. — , Apr 16 '19 at 05:45
All I can think of is to play around with the top and bottom padding of the .nav-side class. I changed the snippet to use a percentage for this, rather than the fixed px. This might be a better solution for different devices. If it's not exactly the solution you're looking for, I would hold out for a bit longer. Some genius will come along with something better, I'm sure. — MichaelvE, Apr 16 '19 at 06:25

score 0 · Answer 2 · answered Apr 16 '19 at 07:52

0

try adding this your CSS

.nav-side {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  height: 100%;
  width: 100%;
}
.side-buts{
    display: flex;
    justify-content: space-around;
      flex-direction: column;

}

answered Apr 16 '19 at 07:52

ruchika vasu

101
1
1
9

Vertically spacing items in a div (flexbox space-around not working..)

2 Answers2