---
tags: Css
---
# 多項目自動填滿寬度
###### tags: `css`

#parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1;
  min-width: 25%;
}

<iframe height="300" style="width: 100%;" scrolling="no" title="Wrapping Flexbox with Media Query Widths" src="https://codepen.io/chriscoyier/embed/BaajoV?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/chriscoyier/pen/BaajoV">
Wrapping Flexbox with Media Query Widths</a> by Chris Coyier (<a href="https://codepen.io/chriscoyier">@chriscoyier</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>
https://css-tricks.com/filling-space-last-row-flexbox/