Flexbox align center

Question

I have a side nav-bar. I want the items to be evenly spaced so that it fills out the whole 'bar'.

I've tried making my 'container' have justify-content: space-between. However, it's not taking the flex attribute.

I'll post my code as it'll show what I mean.

I also would like it that it stays 'fixed' but doing so cuts the 'container' to about 50% height.

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-family: "Dosis", sans-serif;
}

body {
  display: flex;
  min-height: 100vh;
  flex-flow: row wrap;
  margin: auto;
  background-color: black;
}

.side-menu {
  background-color: lightcoral;
  font-size: 2em;
  text-transform: uppercase;
  justify-content: space-between;
}

.side-menu ol {
  list-style-type: none;
  max-width: 100%;
  padding: 0px 30px;
}

.side-menu li {
  line-height: 5em;
}

#projects {}

.top-header {
  background-color: lightgreen;
  height: 20vh;
  box-sizing: border-box;
}

<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
</head>

<body>
  <title>X. Quisite</title>
  <nav class="side-menu">
    <ol>
      <li class="about-me">About</li>
      <li class="projects">Projects
        <li>
          <li class="skills">Services</li>
          <li class="contact">Contact</li>
    </ol>
  </nav>
</body>

</html>

Is this what you're after? https://codepen.io/UncaughtTypeError/pen/NwwGKR — UncaughtTypeError, Nov 16 '17 at 20:32

Michael Benjamin · Accepted Answer · 2017-11-16T20:38:28.873

1

The justify-content property applies only to flex containers. So it must apply to an element that also has display: flex or display: inline-flex (read more).

body {
  display: flex;
  height: 100vh;
  margin: 0;
  background-color: black;
}

.side-menu {
  background-color: lightcoral;
  font-size: 2em;
  text-transform: uppercase;
  justify-content: space-between;
  display: flex;           /* new */
  flex-direction: column;  /* new */
}

a {
  padding: 0px 30px;
}

<nav class="side-menu">
  <a class="about-me">About</a>
  <a class="projects">Projects</a>
  <a class="skills">Services</a>
  <a class="contact">Contact</a>
</nav>

edited Nov 16 '17 at 20:38

answered Nov 16 '17 at 20:31

Michael Benjamin

346,931
104
581
701

i see you change the 'li' -> 'a' Is this something specific for flex or in css in general for this to work? – Azhorabai Nov 16 '17 at 20:46
Just a general modification. Since you're using the `nav` element, there's no need for the `ol`. It's just extra mark-up. Was just a bit of cleaning-up. It's not related to the answer. – Michael Benjamin Nov 16 '17 at 20:47
Except, if you keep the original structure, the flex container would need to be the `ol` not the `nav`. See the "read more" in my answer for an explanation. – Michael Benjamin Nov 16 '17 at 20:48
1

Omg, that explanation is so clear! I've been watching videos, reading documentation and the sorts and honestly, everything just flew way over my head. Thank you SO much – Azhorabai Nov 16 '17 at 20:57

score 1 · Answer 2 · answered Nov 16 '17 at 20:44

When applying flex rules like justify-content: space-between; you need to apply them to an element with the rule display: flex declared.

These flex rules will apply to direct descendant nested elements only, so you should declare them to the unordered list item (ol), then specify the flex-direction: column so that you can justify the content vertically. In addition, you can declare align-items: center; to horizontally align the list items (these rules typically work in reverse if the direction has been specified horizontal, or row, e.g: flex-direction: row).

Lastly, your fixed navigation will occupy the full height of the viewport if you declare top: 0 and bottom: 0 properties.

*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-family: 'Dosis', sans-serif;
}
body{
    display: flex;
    min-height: 100vh;
    flex-flow: row wrap;
    margin: auto;
    background-color: black;
}

.side-menu {
    background-color: lightcoral;
    font-size: 2em;
    text-transform: uppercase;
    position: fixed;
    top: 0;
    bottom: 0;
}

.side-menu ol {
    list-style-type: none;
    max-width: 100%;
    padding: 0px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0;
    height: 100%;
    align-items: center;
}

.side-menu li{
    /*line-height: 5em;*/ /* unset for code snippet preview */
}

#projects{
}
.top-header{
    background-color: lightgreen;
    height: 20vh;
    box-sizing: border-box;
}

<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet">
</head>
<body>
    <title>X. Quisite</title>
        <nav class="side-menu">
            <ol>
                <li class="about-me">About</li>
                <li class="projects">Projects</li>
                <li class="skills">Services</li>
                <li class="contact">Contact</li>
            </ol>
        </nav>
    </body>
</html>

Flexbox align center

2 Answers2