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.

回答1:

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>

回答2:

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>

回答3:

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>

回答4:

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.

回答5:

You take a simple change the

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

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>

来源：https://stackoverflow.com/questions/56353389/flex-box-rendering-like-a-column-when-it-should-be-a-row

标签

html

css

flexbox