Flexbox leaving empty spacing

Asked

Viewed 398 times

2

I’m studying flexbox and decided to create a menu, everything works well, but this getting a spacing without me having given, so I know the flex: 1 takes up all the space, but that’s not what is happening.

Photo of the problem: inserir a descrição da imagem aqui

Code: HTML

<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>

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

}
css flexbox

1 answer

1


Boy your problem is that by default every element <ul> has a padding! You need to remove this padding of user-agent at hand, placing padding:0 in ul class .nav

See how the result looks:

.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>

See that in the official documentation of W3C the 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: https://www.w3.org/TR/2012/WD-html-markup-20120329/ul.html#ul-display

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

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

  • It was perfect, I was a little surprised to know that by default ul has a padding, this because I always created menus using the float and did not give this spacing, but thanks, this information is very useful

  • @Pedrosilva gives a look at this link https://answall.com/questions/165937/o-que-%C3%A9-user-agent-stylesheets you will see that by default the Browser can establish some CSS basa for the stylesheet, may or may not be different from those suggested by W3C... so there are some Normalizer.css and reset.css to try to reset or match the css defaut of all browsers

  • @Pedrosilva another link that will interest you to better understand what happened. These are readings that will serve you for the rest of dev’s life. it is worth stopping for a minute to read https://answall.com/questions/100044/css-reset-ou-normalize

Browser other questions tagged css flexbox

You are not signed in. Login or sign up in order to post.