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

Question

我必须创建一个看起来像这样的布局：

我准备的代码如下：

auto

const auto router = [this](auto function)
{
    std::function<void(std::string req, std::string res)> func = function;
    return std::bind(&ApiDispatcher::middleware, this, _1, _2, func);
};

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

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

我知道我可以使用.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的CSS样式对其进行修复。 但是我想知道是否有可能仅通过使用flex功能来创建这种布局。

所以：

• 我们只能使用flex功能

• 红色div和黄色div之间必须有一定的空白

• 蓝色div必须在最右侧

如何实现？

Answer 1

您写道：

  

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

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

根据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

您可以使用嵌套的弹性框。为您的蓝色物品制作弹性包装纸，并证明其正确性：

.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但又如接受的答案中所述，margin是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>