如何在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; 
}