如何在flex显示元素的列上方放置div？

Question

我有一个显示为flex的div。在div内还有其他3个元素。我希望第一个元素的宽度为100％，第二个和第三个元素应保持彼此相邻。

示例代码： Codepen

#flex-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}
#flex-container > .flex-item {
  -webkit-flex: auto;
  flex: auto;
}
#flex-container > .raw-item {
  width: 5rem;
}
#flex-container {
  width: 100%;
  font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
}
#flex-container > .raw-item {
  border: 1px solid #000;
}
.fullwidth {
  background-color: yellow;
}

<div id="flex-container">
  <div class="fullwidth">full swidth</div>
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>

在这里，我想实现黄色div（class = fullwidth）为100％且在其他2个元素之上，而无需更改HTML和跳过flex的情况。

有没有办法正确地做到这一点？

Answer 1

您可以flex-wrap: wrap在Flex容器和flex: 0 0 100%div上使用要采用全角的格式。也可以使其他div的宽度相等flex: 1

* {
  box-sizing: border-box;
}
#flex-container {
  font-family: Consolas, Arial, sans-serif;
  display: flex;
  flex-wrap: wrap;
}
#flex-container > div {
  border: 1px solid #f00;
  padding: 1rem;
  flex: 1;
}
#flex-container > .raw-item {
  border: 1px solid #000;
}
#flex-container > div.fullwidth {
  background-color: yellow;
  flex: 0 0 100%;
}

<div id="flex-container">
  <div class="fullwidth">full swidth</div>
  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
  <div class="raw-item" id="raw">Raw box</div>
</div>