CODEWITHSUNDEEP
htmlcssflexbox
Mentalist
Mentalist

Reputation: 1623

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

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.

Upvotes: 3

Views: 2392

Answers (5)

Md. Abu Sayed
Md. Abu Sayed

Reputation: 2486

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>

Upvotes: 0

yaswanth
yaswanth

Reputation: 159

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.

Upvotes: 0

Krzysztof Antosik
Krzysztof Antosik

Reputation: 993

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>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

  1. use the flex to ul not nav(You have to set flex to the wrap DOM of you elements you want them to flex)
  2. 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>

Upvotes: 2

Atul Rajput
Atul Rajput

Reputation: 4178

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,

  1. There is no need to give flex-direction: row as this is the default property.
  2. 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>

Upvotes: 2

Related Questions