时间戳

首页 > 解决方案 > Flexbox 对齐网格

html - Flexbox 对齐网格

问题描述

我正在尝试使用 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就无法做到这一点？

标签： htmlcssflexboxgrid

解决方案

这是我理解的小提琴基础。 https://jsfiddle.net/m4j1e3tb/

我改变的事情：

  • 每一行都是它自己的弹性容器

  • flex 容器不会包裹

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

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

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

推荐阅读