Flexbox 对齐网格答案

【问题标题】：Flexbox justified gridFlexbox 对齐网格
【发布时间】：2020-05-12 06:26:27
【问题描述】：

我正在尝试使用 flexbox 创建相同的基本对齐网格。如果我放置一些图像并应用 flex wrap，它看起来像这样：

#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就无法做到这一点？

【问题讨论】：

您的意思是您希望容器不将图像换行，而是继续缩小图像大小，同时将所有内容保持在一行中？
是的，像正当画廊这样的工作，但我担心我需要 javascript。或者至少定义了行高。

标签： html css flexbox grid

【解决方案1】：

根据我的理解，这是一个小提琴基础。 https://jsfiddle.net/m4j1e3tb/

我改变的东西：

每一行都是它自己的弹性容器
flex 容器不会包裹
在作为弹性项目的“盒子”上，我添加了flex-shrink: 1，它告诉盒子在空间“用完”时缩小

.box {
  margin: 1px;
  position: relative;
  text-align: center;
  max-width: 100%;
  flex-shrink: 1;
}

编辑：格式化。抱歉，我还是 stackoverflow 的新手..

【讨论】：