Flex box rendering like a column when it should be a row

Question

I am putting together what should be a simple nav bar and styling with flex box. For some reason, instead of displaying as a row (horizontal), it is showing as a column (vertical).

I can make the links go horizontal using float:left, but then they don't stretch evenly to fill the nav bar.

My understanding is that flex-grow:1 should make each item occupy an equal amount of space. But this is not happening.

There are four declarations that are not working as expected:

flex-direction The links within the nav bar are in a column instead of a row

padding Although the nav bar's padding is set to zero, it still appears to have padding

text-align The text within each <li> is not getting horizontally centered

flex-grow The links are not spacing out evenly

I'm not sure if they are all stemming from to one problem, or each separate problems.

Here is a simplified snippet:

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav {
 display: flex;
 flex-direction: row; /* not working */
 background-color: #d2d6d6;
 padding: 0; /* not working */
}
nav a {
 display: flex;
 text-decoration: none;
 list-style: none;
 border: 2px solid #727171;
 color: #727171;
 background-color: #c4c4c4;
 padding: 4px;
 margin: 2px;
 text-align: center; /* not working */
 flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
 background-color: #aaa;
}
</style>
</head>

<body>
<nav>
 <ul>
  <a href="#"><li>Once</li></a>
  <a href="#"><li>Upon</li></a>
  <a href="#"><li>A Time</li></a>
  <a href="#"><li>There</li></a>
  <a href="#"><li>Was</li></a>
  <a href="#"><li>A Problematic</li></a>
  <a href="#"><li>Nav Bar</li></a>
 </ul>
</nav>
</body>
</html>

I've used flex box plenty of times before, but never seen it behave like this.

לבני מלכה · Answer 1 · 2019-05-29T05:16:42.000

use the flex to ul not nav(You have to set flex to the wrap DOM of you elements you want them to flex)
I think better to use ul and immediately li not a(ul li a)

ul {
  display: flex;
  flex-direction: row;
  background-color: #d2d6d6;
  padding: 0;
}

nav li {
  display: flex;
  text-decoration: none;
  list-style: none;
  border: 2px solid #727171;
  color: #727171;
  background-color: #c4c4c4;
  padding: 4px;
  margin: 2px;
  text-align: center;
  flex-grow: 1;
}

nav a:hover,
nav a:active {
  background-color: #aaa;
}

<nav>
  <ul>
    <li>
      <a href="#">Once</a>
    </li>
           <li>
      <a href="#">Once</a>
    </li>
    <li>
      <a href="#">Once</a>
    </li>
    <li>
      <a href="#">Once</a>
    </li>
    <li>
      <a href="#">Once</a>
    </li>
  </ul>
</nav>

tell me for more help – לבני מלכה May 29 '19 at 05:11 — לבני מלכה, May 29 '19 at 05:11

score 2 · Accepted Answer · answered May 29 '19 at 05:16

2

There is a small mistake in your code, here is the corrected one, You have given all the properties to Nav, while you need to assign these to UL,

There is no need to give flex-direction: row as this is the default property.
Padding is also working now, please check.

nav ul {
 display: flex;
        text-decoration: none;
 flex-direction: row; /* not working */
 background-color: #d2d6d6;
 padding: 0; /* not working */
}
nav li {
 display: flex;
 text-decoration: none;
 list-style: none;
 border: 2px solid #727171;
 color: #727171;
 background-color: #c4c4c4;
 padding: 4px;
 margin: 2px;
 justify-content: center;
 flex-grow: 1;
}
nav a:hover,
nav a:active {
 background-color: #aaa;
}

<nav>
 <ul>
  <li><a href="#">Once</a></li>
  <li><a href="#">Upon</a></li>
  <li><a href="#">A Time</a></li>
  <li><a href="#">There</a></li>
  <li><a href="#">Was</a></li>
  <li><a href="#">A Problematic</a></li>
  <li><a href="#">Nav Bar</a></li>
 </ul>
</nav>

answered May 29 '19 at 05:16

Atul Rajput

4,073
2
12
24

1

and one more thing, Li need to be the direct child of UL not anchor. – Atul Rajput May 29 '19 at 05:16
Thank you. This was the most clearly explained answer and helped me understand the source of the main problem. You also addressed the padding and text centering issues, so I am accepting yours as the best answer. (Appreciation to all who contributed answers!) – Mentalist May 29 '19 at 05:26
I edited the snippet so that the `hover` styling and `text-decoration:none` are now correctly targeted also. – Mentalist May 29 '19 at 05:52
(For anyone wondering, that edit is presently awaiting review. Will delete this comment once it has been reviewed and is visible to all.) – Mentalist May 29 '19 at 05:57
Something I had to look up (and I will post here in case others find it useful), is how to make the `
` elements clickable, since wrapping them within `` causes the layout to break. Just add an `onclick` event. https://stackoverflow.com/a/16582588/2454914 This combined with styling the `hover` on the `
` (not the ``) and adding `cursor:pointer` to the `
` makes it behave as if it were an anchor.

Mentalist

May 29 '19 at 07:21

score 0 · Answer 3 · edited May 29 '19 at 05:39

0

You can try giving display: flex to nav ul as well.

nav ul {
    display: flex;
}

Now the Items are appearing in a row instead of a column. By default, ul is block element so the display will be block for ul.

edited May 29 '19 at 05:39

Gino Mempin

25,369
29
96
135

answered May 29 '19 at 05:11

yaswanth

159
9

score 0 · Answer 4 · answered May 29 '19 at 05:22

In nav a {...} replace display: flex; out of display: inline-flex;

Here's the effect:

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav {
 display: flex;
 flex-direction: row; /* not working */
 background-color: #d2d6d6;
 padding: 0; /* not working */
}
nav a {
 display: inline-flex;
 text-decoration: none;
 list-style: none;
 border: 2px solid #727171;
 color: #727171;
 background-color: #c4c4c4;
 padding: 4px;
 margin: 2px;
 text-align: center; /* not working */
 flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
 background-color: #aaa;
}
</style>
</head>

<body>
<nav>
 <ul>
  <a href="#"><li>Once</li></a>
  <a href="#"><li>Upon</li></a>
  <a href="#"><li>A Time</li></a>
  <a href="#"><li>There</li></a>
  <a href="#"><li>Was</li></a>
  <a href="#"><li>A Problematic</li></a>
  <a href="#"><li>Nav Bar</li></a>
 </ul>
</nav>
</body>
</html>

score 0 · Answer 5 · answered May 29 '19 at 06:14

You take a simple change the

nav {
   display: flex;
   flex-direction: row; /* not working */
   background-color: #d2d6d6;
   padding: 0; /* not working */
}

To

nav ul {
   display: flex;
   flex-direction: row; /* not working */
   background-color: #d2d6d6;
   padding: 0; /* not working */
}

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Curse of the Nav Bar</title>
<style>
nav ul {
 display: flex;
 flex-direction: row; /* not working */
 background-color: #d2d6d6;
 padding: 0; /* not working */
}
nav a {
 display: flex;
 text-decoration: none;
 list-style: none;
 border: 2px solid #727171;
 color: #727171;
 background-color: #c4c4c4;
 padding: 4px;
 margin: 2px;
 text-align: center; /* not working */
 flex-grow: 1; /* not working */
}
nav a:hover,
nav a:active {
 background-color: #aaa;
}
</style>
</head>

<body>
<nav>
 <ul>
  <a href="#"><li>Once</li></a>
  <a href="#"><li>Upon</li></a>
  <a href="#"><li>A Time</li></a>
  <a href="#"><li>There</li></a>
  <a href="#"><li>Was</li></a>
  <a href="#"><li>A Problematic</li></a>
  <a href="#"><li>Nav Bar</li></a>
 </ul>
</nav>
</body>
</html>

Flex box rendering like a column when it should be a row

5 Answers5

Linked