Flexbox之间的行为间隔问题 [英] Flexbox space-between behavior issue

问题描述

我在具有这些属性的flex容器中有五个li文本元素

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>

问题在于，即使没有填充或边距，li元素由于某种原因也不会到达容器的边缘.我在做什么错?如何使用Flexbox(或不使用Flexbox)来实现?非常感谢您的帮助.

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.

示例

推荐答案

删除所有边距&填充并设置box-sizing:border-box

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>

这篇关于Flexbox之间的行为间隔问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！