html - 仅使用弹性功能创建特殊网格

Question

我必须创建一个布局，如下所示：

我准备了如下代码：

.red {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-right: 20px;
}

.yellow {
  width: 50px;
  height: 50px;
  background-color: yellow;
}

.blue {
  width: 50px;
  height: 50px;
  background-color: blue;
  justify-self: end;
}

.wrapper {
  display: flex;
  background-color: green;
  width: 100%;
}

<div class="wrapper">
  <div class="red"> </div>
  <div class="yellow"> </div>
  <div class="blue"> </div>
</div>

但是这个蓝色 div 不想与右侧对齐：

在这里您可以预览一下： https ://jsfiddle.net/ncszob80/17/

我知道我可以用margin-left: auto蓝色 div 的 css 样式修复它。但我想知道是否有可能仅通过使用 flex 功能来创建这样的布局。

所以：

• 我们只能使用弹性功能

• 红色 div 和黄色 div 之间需要有一些边距

• 蓝色 div 需要在最右边

如何做到这一点？

标签： htmlcssflexbox

Answer 1

你写了：

我知道我可以用margin-left: auto蓝色 div 的 css 样式修复它。但我想知道是否有可能仅通过使用 flex 功能来创建这样的布局。

实际上，margin-left: auto是弹性功能。这是 flex 布局的一个特性。

来自 flexbox 规范：

• § 8.1。auto 与边距对齐

另见：

• 在 CSS Flexbox 中，为什么没有“justify-items”和“justify-self”属性？

总之，只需使用auto边距。这是最干净、最简单和最有效的解决方案。