align items on stretch to the center of the parent div

Question

I tried to create a menu that stretches to full height on mobile screens. For the parent container I use a flexbox with flex-direction column and stretch the items on full screen height.

$(document).ready(() => {
  $("#btnMenu").click(() => {
    toggleMenu();
  });

  $(".navbarLink").click(() => {
    if ($("#navbarItems").hasClass("activeNavbar")) {
      toggleMenu();
    }
  });
});

function toggleMenu() {
  $("#navbarItems").toggleClass("activeNavbar");
  toggleMenuBtn();
}

function toggleMenuBtn() {
  $("#btnMenu").toggleClass("activeMenuBtn");
}

body {
  margin: 0;
}

.link {
  text-decoration: none;
}

#navbar {
  height: 60px;
  top: 0;
  padding-left: 200px;
  padding-right: 200px;
  position: sticky;
  background: #1e222a;
}

#navbarItems {
  height: 100%;
  display: flex;
  align-items: center;
}

#logoLink {
  display: flex;
  align-items: center;
}

#navbarItems .navbarItem:not(:first-child) {
  margin-left: 30px;
}

.navbarItem {
  background: #1e222a;
}

.navbarLink {
  color: #ffffff;
}

.navbarLink:hover {
  color: #3abcf3;
}

#btnMenuContainer {
  height: 100%;
  display: none;
}

#btnMenu {
  cursor: pointer;
}

.menuBtnBar {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  background-color: #ffffff;
  transition: 0.4s;
}

.activeMenuBtn #barTop {
  transform: rotate(-45deg) translate(-9px, 6px);
}

.activeMenuBtn #barCenter {
  opacity: 0;
}

.activeMenuBtn #barBottom {
  transform: rotate(45deg) translate(-8px, -8px);
}

@media(max-width: 1200px) {
  #navbar {
    padding-left: 150px;
    padding-right: 150px;
  }
}

@media(max-width: 1100px) {
  #navbar {
    padding-left: 0;
    padding-right: 0;
  }
  #btnMenuContainer {
    display: flex;
    align-items: center;
  }
  #btnMenu {
    margin-left: 20px;
  }
  #navbarItems {
    margin-left: 0;
    display: none;
  }
  #navbarItems.activeNavbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100vh;
  }
  #logoLink {
    display: inline-block;
  }
  .navbarItem {
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #navbarItems .navbarItem:not(:first-child) {
    margin-left: 0;
  }
  #navbarItems .navbarItem:not(:last-child) {
    border-bottom: 1px solid #676767;
  }
  .navbarLink {
    width: 100%;
    height: 100%;
    display: inline-block;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <div id="btnMenuContainer">
    <div id="btnMenu">
      <div id="barTop" class="menuBtnBar"></div>
      <div id="barCenter" class="menuBtnBar"></div>
      <div id="barBottom" class="menuBtnBar"></div>
    </div>
  </div>

  <div id="navbarItems">
    <div class="navbarItem">
      <a id="logoLink" class="link navbarLink" href="#">
        <img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
      </a>
    </div>

    <div class="navbarItem">
      <a class="link navbarLink" href="#">
                            Link 2
                        </a>
    </div>

    <div class="navbarItem">
      <a class="link navbarLink" href="#">
                            Link 3
                        </a>
    </div>
  </div>
</div>

When using align-items: stretch; how can I place the links (and the logo) back to center?

My second question is what can I use for height: 100vh; instead? I would like to keep it dynamic so maybe there is a better way than using a constant number?

Answer 1

Follow this link https://flexboxfroggy.com/ there is a really nice game which will teach you flexbox while playing in no time. After that you will be able to fix your navigation.

Answer 2

Let .navbarLink also have a flex layout.

.navbarItem {
    flex: 1 1 100%;
}

.navbarLink {
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    text-align: center;
}

By the way, here is a great resource that really helped me when I learned to use flexbox layouts. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

It works fine. Check the code snippets and fiddle for further clarification.

Noe all links are center aligned and menu height takes the full height of the space available and there is no scroll any more.

My suggestion is to use 100vh for the height because it better than applying static value since 100vh is dynamic value.

https://jsfiddle.net/Sampath_Madhuranga/4uLb6rsw/7/

$(document).ready(() => {
  $("#btnMenu").click(() => {
    toggleMenu();
  });

  $(".navbarLink").click(() => {
    if ($("#navbarItems").hasClass("activeNavbar")) {
      toggleMenu();
    }
  });
});

function toggleMenu() {
  $("#navbarItems").toggleClass("activeNavbar");
  toggleMenuBtn();
}

function toggleMenuBtn() {
  $("#btnMenu").toggleClass("activeMenuBtn");
}

body {
  margin: 0;
}

.link {
  text-decoration: none;
}

#navbar {
  height: 60px;
  top: 0;
  padding-left: 200px;
  padding-right: 200px;
  position: sticky;
  background: #1e222a;
}

#navbarItems {
  height: 100%;
  display: flex;
  align-items: center;
}

#logoLink {
  display: flex;
  align-items: center;
}

#navbarItems .navbarItem:not(:first-child) {
  margin-left: 30px;
}

.navbarItem {
  background: #1e222a;
}

.navbarLink {
  color: #ffffff;
}

.navbarLink:hover {
  color: #3abcf3;
}

#btnMenuContainer {
  height: 100%;
  display: none;
}

#btnMenu {
  cursor: pointer;
}

.menuBtnBar {
  width: 35px;
  height: 5px;
  margin: 6px 0;
  background-color: #ffffff;
  transition: 0.4s;
}

.activeMenuBtn #barTop {
  transform: rotate(-45deg) translate(-9px, 6px);
}

.activeMenuBtn #barCenter {
  opacity: 0;
}

.activeMenuBtn #barBottom {
  transform: rotate(45deg) translate(-8px, -8px);
}

@media(max-width: 1200px) {
  #navbar {
    padding-left: 150px;
    padding-right: 150px;
  }
}

@media(max-width: 1100px) {
  #navbar {
    padding-left: 0;
    padding-right: 0;
  }
  #btnMenuContainer {
    display: flex;
    align-items: center;
  }
  #btnMenu {
    margin-left: 20px;
  }
  #navbarItems {
    margin-left: 0;
    display: none;
  }
  #navbarItems.activeNavbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: calc( 100vh - 60px);
  }
  #logoLink {
        display: flex;
    justify-content: center;
  }
  .navbarItem {
    flex: 1 1 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  #navbarItems .navbarItem:not(:first-child) {
    margin-left: 0;
  }
  #navbarItems .navbarItem:not(:last-child) {
    border-bottom: 1px solid #676767;
  }
  .navbarLink {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
  <div id="btnMenuContainer">
    <div id="btnMenu">
      <div id="barTop" class="menuBtnBar"></div>
      <div id="barCenter" class="menuBtnBar"></div>
      <div id="barBottom" class="menuBtnBar"></div>
    </div>
  </div>

  <div id="navbarItems">
    <div class="navbarItem">
      <a id="logoLink" class="link navbarLink" href="#">
        <img class="img" src="https://cdn4.iconfinder.com/data/icons/32x32-free-design-icons/32/Ok.png">
      </a>
    </div>

    <div class="navbarItem">
      <a class="link navbarLink" href="#">
                            Link 2
                        </a>
    </div>

    <div class="navbarItem">
      <a class="link navbarLink" href="#">
                            Link 3
                        </a>
    </div>
  </div>
</div>

Thanks.