小编clo*_*oid的帖子

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

我有一个显示为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;
}
Run Code Online (Sandbox Code Playgroud)
<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" …
Run Code Online (Sandbox Code Playgroud)

css position flexbox

5
推荐指数
1
解决办法
1106
查看次数

标签 统计

css ×1

flexbox ×1

position ×1