Flexbox：不需要的换行符

Question

连续应该有3个DIV。出于某种原因，在第二个DIV之后出现换行符。应该有足够的空间，因为每个DIV只有33％的宽度。那么为什么这个突破发生了呢？

结果应如下所示：

这是我目前的代码。

＆＃13;

＆＃13;

* {
  box-sizing:border-box;
}

.flex {
  display: flex;
  flex-wrap:wrap;
}

.third {
  margin: 5px;
  padding:5px;
  background-color: #555;
  flex-basis:calc(100%/3);
}

＆＃13;

<div class="flex">


    <div class="third">third</div>
    <div class="third">third</div>
    <div class="third">third</div>

    <div class="third">third</div>
    <div class="third">third</div>

 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要在flex-basis：

的计算中考虑保证金

＆＃13;

＆＃13;

* {
  box-sizing:border-box;
}

.flex {
  display: flex;
  flex-wrap:wrap;
  border:1px solid;
}

.third {
  margin: 5px;
  padding:5px;
  background-color: #555;
  flex-basis:calc(100%/3 - 10px);
}

＆＃13;

<div class="flex">


    <div class="third">third</div>
    <div class="third">third</div>
    <div class="third">third</div>

    <div class="third">third</div>
    <div class="third">third</div>

 
</div>

＆＃13;

＆＃13;

＆＃13;