Flexbox布局，3项1左1右1在第二行

Question

不太确定如何把它想要一个基本上用divs

做这个的布局

A B. ç

如果A的内容是左对齐的，则B的内容是右对齐的，并且C的内容是左对齐的。

了解Flex的基础知识，但似乎无法理解实现这一点。猜猜A，B，C将是div容器，打开flex wrap将C转到第二行。

希望这不是太模糊。

Answer 1

section {
  display: flex;
  flex-wrap: wrap;
}

div:nth-child(1) {
  flex: 1 0 45%;
  margin-right: 5px;
}

div:nth-child(2) {
  flex: 1 0 45%;
}

div:nth-child(3) {
  flex-basis: 100%;
  margin-top: 5px;
}

div {
  border: 1px solid gray;
  background-color: lightgray;
  text-align: center;
}

<section>
  <div>A</div>
  <div>B</div>
  <div>C</div>
</section>