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

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/

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

所以:

• 我们只能使用 Flex 功能

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

• 蓝色 div 需要位于最右侧

如何实现这一目标？

Answer 1

您写道:

I know that I can fix it with margin-left: auto css style for blue div. But I'm wondering if there is some possibility of creating such layout only by using flex functionality.

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

来自 flex 盒规范:

• § 8.1. Aligning with auto margins

另请参阅:

• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

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