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

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 需要在最右边

如何实现？

Answer 1

你写的：

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

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

来自 flexbox 规范：

• § 8.1. Aligning with auto margins

另见：

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

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

Answer 2

我对您的最佳解决方案是稍微更改您的 DOM 结构 - 但它会完成您正在寻找的内容：

.left {
  display: flex;
}
.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;
}

.wrapper {
  display: flex;
  background-color: green;
  width: 100%;
  justify-content: space-between;
}

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

基本上，我用.left 和.right 包裹你的盒子，然后将.wrapper 更改为justify-content: space-between，这样.right 盒子就被推到了右边。然后，我们使用.left { display: flex; } 来解决这些盒子堆叠的问题，而无需这样做，或者将里面的元素更改为display: inline; 或display: inline-block;。

Answer 3

您可以使用嵌套的弹性框。为您的蓝色项目制作 flex 包装器，并在最后证明这一点：

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

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

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

.blueWrap {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: flex-end;
}

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

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

Answer 4

除了更改 DOM 结构或使用 margin-left: auto 修复 CSS Grid 之外，这种布局非常棒。我知道您只说 Flexbox，但如果您不想要任何其他解决方案，Grid 可能是一个不错的选择。您也可以在网格中混合使用 Flex 功能以获得更精细的控制。我经常这样做以实现我需要的布局并且效果很好！

编码愉快！

Answer 5

如果您不想考虑 margin:auto 并且不更改您的 html 但就像接受的答案中所说的那样，这是另一个想法，边距是 flexbox 的 a 功能：

.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;
  order:1; /*make the blue the last element*/
}

.wrapper {
  display: flex;
  background-color: green;
  width: 100%;
}
.wrapper:after {
  content:"";
  flex-grow:1; /*make this hidden element to take all the space and push the blue*/
}

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