CODEWITHSUNDEEP
htmlcssflexbox
Azhorabai
Azhorabai

Reputation: 111

Flexbox align center

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.

https://codepen.io/azhorabai/pen/MOOwrJ

* {
  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>

Upvotes: 1

Views: 52

Answers (2)

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

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>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 372059

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>

Upvotes: 1

Related Questions