如何在CSS中自動判斷div

Question

我對CSS有點疑問：我想用div來做一些響應式的東西。

更確切地說，我想有一個大div包含小divs裏面。這些div的數量可能有所不同，但它們應該都具有固定的大小（例如，比方說250px）。所以我想知道是否有辦法做出一種靈活的解決方案，以便divs總是合理的，並且一旦屏幕很小以顯示例如每行6個小div，它只顯示5個div每行。

我敢肯定，這是不是很清楚，所以這裏有兩場平局：

This is the first situation, the div is large enought to have 4 subdivs per line

Then, this div can't display 4 subdivs per line : so it shows 3 subdivs

Answer 1

Flexbox在這裏很有用。這裏有一個Codepen已經做了你在找什麼：

https://codepen.io/ksmessy/pen/rmRbdL

當你縮小窗口，該項目將換到下一行。我使用換行符將.flexparent中的3個flex屬性分開，以便查看導致此行爲的原因。

HTML：

<div class="flexparent"> 
    <div class="flexchild"></div> 
    <div class="flexchild"></div> 
    <div class="flexchild"></div> 
    <div class="flexchild"></div> 
    <div class="flexchild"></div> 
</div> 

CSS：

.flexparent { 
    border: 3px solid black; 
    width: 550px; 
    max-width: 100%; 
    padding: 10px; 
    box-sizing: border-box; 

    display: flex; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
} 

.flexchild { 
    border: 1px solid red; 
    width: 100px; 
    height: 100px; 
    margin: 10px; 
}