使固定宽度的flexbox项目正确包装

Question

如果他们在谷歌浏览器中修复了固定宽度，我无法正确包装弹性项目。但是，当使用基于百分比的宽度时，一切都正确包装。

如何使用固定宽度的项目进行此操作？

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

＆＃13;

＆＃13;

* {
  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 */
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您的问题是您已将所有元素设置为box-sizing: border-box;。这意味着width的{​​{1}}将包含边框宽度。

修复：

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

.wrapper

* {
  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 */
}

Answer 2

这似乎是border-box声明的问题。

如果您将它从通用选择器中删除并专门应用于儿童，它似乎可以正常工作。

＆＃13;

＆＃13;

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



}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;