Vertically spacing list and sub list items evenly using flexbox

Question

Alright guys, I'm learning CSS right now, and I'm kind of stumped as to why I can't get it to do what I want it to do. It's probably something extremely simple that I'm overlooking.

I'm wanting to have an unordered list containing sub-lists vertically spaced evenly within a full height flexbox sidebar container and the sub-list items doing the same between each list item.

Everything I've tried so far hasn't had any effect on how the list items are displayed.

Any help is appreciated.

body {
  margin: 0;
  Background-Color: rgb(36, 36, 36);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.Sidebar {
  flex: 1 1 auto;
  Height: 100vh;
  color: rgb(136, 136, 136);
}

.Navbar {
  flex: 1 1 auto;
  Display: Flex;
  flex-direction: column;
  width: 81%;
  height: 100vh;
}

.Navbar_Toggle>input[type="checkbox"] {
  display: none;
}

.Searchbar {
  text-align: right;
}

.Content {
  flex: 1 1 auto;
  color: rgb(136, 136, 136);
}

.Link {
  text-decoration: none;
  color: rgb(136, 136, 136);
}

.List {
  list-style-type: none;
  padding-left: 1rem;
}

.Sidebar_List {
  Display: Flex;
  flex-direction: column;
  justify-content: space-between;
}

.Sidebar_Sublist {
  padding-left: 0;
}

.List_Item {
  flex: 0 1 auto
}

.Sidebar_Toggle>input[type="checkbox"] {
  display: none;
}

<div class="Sidebar">
  <div class=Navbar_Control>
    <label class="Navbar_Toggle"><input type="checkbox" class="Navbar_Toggle"/>&#9776</label>
    <ul Class="List Sidebar_List">
      <li class="List_Item"><a Class="Link" href="#">Item1</a></li>
      <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle"/>Item2</label></li>
      <ul Class="List Sidebar_Sublist">
        <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item5</a></li>
      </ul>
      <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle"/>Item3</label></li>
      <ul class="List Sidebar_Sublist">
        <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
      </ul>
      <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle"/>Item4</label></li>
      <ul Class="List Sidebar_Sublist">
        <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist item3</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item5</a></li>
      </ul>
      <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle"/>Item5</label></li>
      <ul Class="List Sidebar_Sublist">
        <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
      </ul>
      <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle"/>Item6</label></li>
      <ul Class="List Sidebar_Sublist">
        <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
      </ul>
      <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle"/>Item7</label></li>
      <ul Class="List Sidebar_Sublist">
        <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
        <li class="List_Item"><a Class="Link" href="#">Sublist Item5</a></li>
      </ul>
    </ul>
  </div>
</div>
<div class="Navbar">
  <div class="Searchbar">
    <input type="search" />
    <input type="button">
  </div>
  <div class="Content">
    Content
  </div>

</div>

Answer 1

Soo I hope I'm understanding what's going on here.

In the future especially for CSS related question, visuals will get you a long way.

I copied your code and I see the navigation:

Item1
Item2
Sublist Item1
Sublist Item2
Sublist Item3
Sublist Item4
Sublist Item5
Item3
Sublist Item1
Sublist Item2
Sublist Item3
Sublist Item4
Item4
Sublist Item1
Sublist Item2
Sublist item3
Sublist Item4
Sublist Item5
Item5
Sublist Item1
Sublist Item2
Sublist Item3
Sublist Item4
Item6
Sublist Item1
Sublist Item2
Sublist Item3
Item7
Sublist Item1
Sublist Item2
Sublist Item3
Sublist Item4
Sublist Item5

And you don't want this? Instead you want...

If so, update your Sidebar class and add display: flex and update your Navbar_control to have a styling of display:flex.

Thus,

.Sidebar{
    flex: 1 1 auto;
    Height: 100vh;
    color: rgb(136,136,136);
    display:flex;
}

.Navbar_Control{
    display:flex;
}

Will fix your problem.

Inspect the change with dev tools. The height of Navbar_Control wasn't flexing the full height the parent element. The changes will fix that.

I hope this helps you. I've done a lot of flexbox work for a couple of my websites. They can be great when used properly. If you want a true responsive layout you will have to do nested display:flex styling as shown in the code I posted to fix your problem.

SOME KEY NOTES:

• Your class names shouldn't be Camel_Case, stop that. Instead they should be lowercase, and replace your underscores with dashes or hyphen ( - ). It's a HTML/CSS common standard.

• You uses classes too much. You don't need a class for li, label, and a elements. This can cause for debugging confusion in the future when your project gets bigger.

• And last but not least. Dev tools is your friend. Always inspect your elements. It's a great tool to see where your CSS is going wrong.

• Anddddd one more ting:

You need to nest your sub list inside the li element. So

    <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle"/>Item2</label></li>
        <ul Class="List Sidebar_Sublist">
            <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
            <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
            <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
            <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
            <li class="List_Item"><a Class="Link" href="#">Sublist Item5</a></li> 
        </ul>

Should really be this:

  <li class="List_Item"><label class="Sidebar_Toggle"><input type="checkbox" class="Sidebar_Toggle" />Item2</label>
    <ul Class="List Sidebar_Sublist">
      <li class="List_Item"><a Class="Link" href="#">Sublist Item1</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item2</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item3</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item4</a></li>
      <li class="List_Item"><a Class="Link" href="#">Sublist Item5</a></li>
    </ul>
  </li>

A ul element should only contain li elements or else you'll run into problems with javascript libraries, people on SO, people at work.

Hope this helps :)