Flexbox leaving empty spacing

Navigation
2

I'm studying flexbox and decided to create a menu, everything works fine, but it's getting a space without me having it, so I know flex: 1 occupies all space, but that's not what's happening. >

Problem photo:

  

Code:HTML

<ulclass="nav">
  <li class="nav-item"><a href="#">Item 1</a></li>
  <li class="nav-item"><a href="#">Item 2</a></li>
  <li class="nav-item"><a href="#">Item 3</a></li>
  <li class="nav-item"><a href="#">Item 4</a></li>
  <li class="nav-item"><a href="#">Item 5</a></li>
</ul>
  

Code: CSS 

.nav {

  background: #ED4343;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;

}
.nav-item {

  flex: 1;
  list-style: none;
  text-align: center;

}

a {

  display: block;
  padding: 20px;
  border: 1px solid #FFFFFF;
  color: #FFFFFF;
  text-decoration: none

}
    
asked by anonymous 19.10.2018 / 14:01

1 answer

1

Boy your problem is that by default every <ul> element has a padding ! You need to remove this padding from the user-agent by hand, putting padding:0 on ul class .nav

Here's how it works: 

.nav {
	background: #ED4343;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
}

.nav-item {
	flex: 1;
	list-style: none;
	text-align: center;
}

a {
	display: block;
	padding: 20px;
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	text-decoration: none
}
<ul class="nav">
	<li class="nav-item"><a href="#">Item 1</a></li>
	<li class="nav-item"><a href="#">Item 2</a></li>
	<li class="nav-item"><a href="#">Item 3</a></li>
	<li class="nav-item"><a href="#">Item 4</a></li>
	<li class="nav-item"><a href="#">Item 5</a></li>
</ul>

Note that in the official W3C documentation, UL has the following attributes by default! 

ul {
display: block;
list-style-type: disc;
margin-before: 1em;
margin-after: 1em;
margin-start: 0;
margin-end: 0;
padding-start: 40px; 
}

Source: link

To clean up these default styles that the user agent puts on some elements you can use a Normalizer or make a Reset in the CSS, this response has more details: CSS Reset or Normalize?

And what is user-agente you can read here: What is User Agent StyleSheets?

    
19.10.2018 / 14:10
Log out when browser close or session ends [duplicate] Bring the sum of IDS and data into two tables using SQL