Question

我对CSS有一点疑问：我想用div做一些反应灵敏的东西。

更确切地说，我希望有一个包含小div的大div。这些div可能会有所不同，但它们都应该有固定的大小（例如，让我们说250px）。所以我想知道是否有办法制作一种灵活的解决方案，以便div总是合理的，并且一旦屏幕小到显示例如每行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;
}

如何在CSS中自动对齐div

1 个答案: