使固定宽度的flexbox子项正确换行

Question

如果在Google Chrome中使用固定宽度的flex项时，我无法正确地进行包装。但是，使用基于百分比的宽度时，一切都能正确地包装。

如何使这适用于固定宽度的项目？

请参见示例： http://codepen.io/anon/pen/wajWLz

* {
  box-sizing: border-box;
  font-family: Arial;
}
.wrapper {
  width: 300px;
  background: #eee;
  border: solid #ddd 1px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-wrap: wrap;
  -webkit-box-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flexbox-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.item {
  background: #ddd;
  border: solid 1px #aaa;
  width: 100px;
  /* Doesn't wrap correctly */
}
.wrapper-second .item {
  width: 33.333333%
  /* Wraps correctly */
}

<p>The wrapper is 300px wide, each item is <strong>100px</strong> wide</p>

<div class="wrapper">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<p>you should see 3 items per row,
  <br />Chrome however wraps after the 2nd item (wraps too soon).</p>

<p>when you change the item width to <strong>33.333333%</strong>, it however wraps correctly.</p>

<div class="wrapper wrapper-second">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<p><strong>Question:</strong> how can I make flexbox wrap fixed width items correctly?</p>

- Adriaan Meuris

Answer 1

你的问题在于你将所有元素都设置为了box-sizing: border-box;。这意味着.wrapper的width将包括边框宽度。

要解决此问题，请执行以下操作之一：

• 向.wrapper添加box-sizing: content-box;
• 将.wrapper上的width: 300px;更改为width: 302px;

* {
  box-sizing: border-box;
  font-family: Arial;
}
.wrapper {
  box-sizing: content-box;
  width: 300px;
  background: #eee;
  border: solid #ddd 1px;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -moz-box-wrap: wrap;
  -webkit-box-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flexbox-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.item {
  background: #ddd;
  border: solid 1px #aaa;
  width: 100px;
  /* Doesn't wrap correctly */
}
.wrapper-second .item {
  width: 33.333333%
  /* Wraps correctly */
}

<p>The wrapper is 300px wide, each item is <strong>100px</strong> wide</p>

<div class="wrapper">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<p>you should see 3 items per row,
  <br />Chrome however wraps after the 2nd item (wraps too soon).</p>

<p>when you change the item width to <strong>33.333333%</strong>, it however wraps correctly.</p>

<div class="wrapper wrapper-second">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<p><strong>Question:</strong> how can I make flexbox wrap fixed width items correctly?</p>

- Hidden Hobbes

Answer 2

似乎存在与"border-box"语句相关的问题。

如果从通用选择器中删除该语句并将其专门应用于子元素，则似乎可以解决问题。

.wrapper {
  width: 300px;
  background: #eee;
  border: solid #ddd 1px;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -moz-box-wrap: wrap;
  -webkit-box-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flexbox-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;

}

.item {
  background: #ddd;
  border: solid 1px #aaa;

  box-sizing: border-box;

  width: 100px;



}

<div class="wrapper">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

- Paulie_D