Flexbox对齐网格

Posted 2021-05-03

我试图用flexbox创建相同的基本对齐网格。如果我放置一些图像并贴上弹性包装，它看起来像这样：

#wrap {
  display: flex;
  flex-wrap: wrap;
  max-width: 800px;
}

.box {
  margin: 1px;
  position: relative;
  text-align: center;
  height: 100%;
}

img {
  position: relative;
  display: block;
}

<div id="wrap">
  <div class="box"><img src="https://via.placeholder.com/250x150" /></div>
  <div class="box"><img src="https://via.placeholder.com/400x150" /></div>
  <div class="box"><img src="https://via.placeholder.com/500x150" /></div>
  <div class="box"><img src="https://via.placeholder.com/150x150" /></div>


</div>

效果很好，但是只要宽度变小，图像就会换行（显然是因为换行）。我想知道这是否可以做出响应，以便无论可用宽度如何都能保持此布局？但是它必须是动态的，而无需将单独的类应用于具有自定义CSS的图像。

或者如果没有javascript不能做到这一点？

答案

这里是根据我的理解而摆弄的东西。https://jsfiddle.net/m4j1e3tb/

我改变的事情：

• 每行将是其自己的伸缩容器

• flex容器不会包装

• 在作为弹性项目的“盒子”上，我添加了flex-shrink: 1，当空间“用完”时，它告诉盒子缩小了]]]

.box {
  margin: 1px;
  position: relative;
  text-align: center;
  max-width: 100%;
  flex-shrink: 1;
}
编辑：格式化。抱歉，我还是stackoverflow的新手。