正确地制作固定宽度的flexbox项目。

I can't manage to wrap flex items correctly if they're fixed width in Google Chrome. However, when using percentage-based widths, everything wraps correctly.

如果flex项目的宽度固定在谷歌Chrome中，我就不能正确地包装它们。然而，当使用基于百分比的宽度时，一切都是正确的。

How can I make this work with fixed width items?

我如何使这个工作与固定宽度的项目?

See example: http://codepen.io/anon/pen/wajWLz

看到示例: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>

2 个解决方案

#1

Your issue is that you have set all elements to box-sizing: border-box;. This means that the width of .wrapper will include the border width.

您的问题是，您已经将所有元素设置为box大小:border-box;。这意味着.wrapper的宽度将包括边界宽度。

To fix either:

修复:

Add box-sizing: content-box; to .wrapper
添加box-sizing:内容框;对.wrapper
Change width: 300px; to width: 302px; on .wrapper
改变宽度:300 px;宽度:302 px;在.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 */
}

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

#2

It seems to be an issue with the border-box statement.

这似乎是边界框语句的问题。

If you remove it from the universal selector and apply it specifically to the children it seems to work.

如果您从通用选择器中删除它，并将它特别应用到子选择器中，那么它似乎可以工作。

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

#1