Question

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

示例代码： Codepen

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

这里我希望实现黄色div（class = fullwidth）为100％并高于其他2个元素，而不更改HTML和跳过flex。

有没有办法正确实现这一目标？

Answer 1

您可以在Flex容器上使用flex-wrap: wrap，在想要使用全宽度的div上使用flex: 0 0 100%。另外，要使其他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>

如何将div放在flex展示元素的列上方？

1 个答案: