Flexbox space-between behavior issue

问题

I have five li text elements inside a flex container with these properties

.contentwrapper{
  position: relative;
  width: 100%;
  padding-left: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem);
  padding-right: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem - .1px);
  margin: 0 auto;
  height: 100%;
}

ul.nav{
  position: relative;
  padding-top: 100px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
}

li.navitem{
  position: relative;
  display: inline-block;
  cursor: default;
  font-size: 1.2em;
  text-transform: uppercase;
}

<div class="contentwrapper">
      <ul class="nav">
        <li class="navitem active">Online</li>
        <li class="navitem">In person</li>
        <li class="navitem">By phone</li>
        <li class="navitem">Mobile App</li>
        <li class="navitem">Inmate</li>
      </ul>
 </div>

The issue is that the li elements don't go to the edges of the container for some reason, even though there are no paddings or margins. What am I doing wrong and how can this be achieved using Flexbox(or not).? Help is much appreciated.

Example

回答1:

Remove all margins & padding and set box-sizing:border-box

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.contentwrapper {
  position: relative;
  width: 100%;
  padding-left: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem);
  padding-right: calc(((((100vw - (13rem))/ 12) * 2) + (1rem * 1)) + 1.5rem - .1px);
  margin: 0 auto;
  height: 100%;
  background: red;
}

ul.nav {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
  background: pink;
}

li.navitem {
  position: relative;
  cursor: default;
  font-size: 1em;
  text-transform: uppercase;
  border: 1px solid grey;
}

<div class="contentwrapper">

  <ul class="nav">
    <li class="navitem active">Online</li>
    <li class="navitem">In person</li>
    <li class="navitem">By phone</li>
    <li class="navitem">Mobile App</li>
    <li class="navitem">Inmate</li>

  </ul>
</div>

回答2:

It varies across browsers, but by default ul element has margin and padding. See this Q&A: Does UL have default margin or padding

So, what you need to do in your case is to remove default margin and padding from the ul element:

ul.nav {
  position: relative;
  margin: 0; /* <- here */
  padding: 100px 0 0; /* here, too, but retaining custom 100px top padding */
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
}

See updated JSFiddle.

来源：https://stackoverflow.com/questions/48743035/flexbox-space-between-behavior-issue

标签

html

css

css3

flexbox