CODEWITHSUNDEEP
htmlcssflexbox
trans
trans

Reputation: 1441

Flexbox properties do nothing

I am trying to create a nav header using Flexbox. Here is the code: http://codepen.io/trans/pen/VmeRQx

<header>
  <nav>
    <ul>
      <li><a class="block" href="/index.html"><span class="title">⭾ T a b</span></a></li>
      <li><a class="block" href="/products/index.html">Products</a></li>
      <li><a class="block" href="/research/index.html">Research</a></li>
      <li><a class="block" href="/advocacy/index.html">Advocacy</a></li>
      <li><a class="block" href="/support/index.html">Support</a></li>
    </ul>
  </nav>
</header>

And the CSS:

header {
  background: #222;
  padding: 0.5em;
  color: white;
}

header nav {
  width: 1080px;
  margin: 0 auto; 
  border: 1px solid yellow;
}

header nav .title {
  color: white; font-size: 2em;
}

header nav a {
 color: white; 
}

header nav ul {
  display: flex; /* or inline-flex */
  flex-wrap: nowrap;
  align-items: stretch;
  align-content: stretch;
  justify-content: space-between;
  list-style: none;
  list-style-type: none;
  padding: 0;
}

header nav li {
  margin: auto;  /* Magic! */
  border: 1px solid green;
}

No matter what I change in flexbox properties nothing about the layout changes: align-items, align-content, justify-content, all seem to do absolutely nothing.

I want the two end items to be flush with the edges of the container and I'd like the li's to stretch to fill the empty space. But I can't figure out how.

(P.S. I think it's has to be the height of irony that after decades of being told not to use tables, they still can't come up with anything that is as easy to use nor generally as responsive.)

Upvotes: 0

Views: 584

Answers (2)

trans
trans

Reputation: 1441

As soon as post this I answer my own question. The trick is to use flex-grow and flex-basis in the li elements, e.g. flex-grow: 1.

Upvotes: 0

bnjmn.myers
bnjmn.myers

Reputation: 439

Try removing:

margin: auto;  /* Magic! */

from:

header nav li{

}

When I did this the flex properties began working.

Upvotes: 1

Related Questions