如果在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>