使弹性项目像显示块一样

Question

所以我有一个使用display flex的容器,然后是4个div,其中第一个需要像使用显示块一样,其他3个需要按原样运行.

代码段演示:

#container {
  display: flex;
}

#menu {
  display: flex;
}

#menu p {
  margin: 0;
  padding: 8px;
  padding-bottom: 0;
}

.otherDivs {
  height: 700px;
  width: 10%;
  background-color: grey;
  margin-right: 5px;
}

<div id="container">

  <div id="menu">

    <p>Btn</p>
    <p>Btn</p>
    <p>Btn</p>

  </div>

  <div class="otherDivs"></div>
  <div class="otherDivs"></div>
  <div class="otherDivs"></div>

</div>

如何让菜单显示在其他div之上？

我知道我可以把菜单div放在容器之外,但我需要将它保存在容器中,因为我在Jquery选项卡中使用它.

Answer 1

您应该添加flex-basis: 100%到#menu,并允许灰色物品通过应用去一个新行flex-wrap: wrap;到#container:

#container {
  display: flex;
  flex-wrap: wrap;
}

#menu {
  display: flex;
  flex-basis: 100%;
}

#menu p {
  margin: 0;
  padding: 8px;
  padding-bottom: 0;
}

.otherDivs {
  height: 700px;
  width: 10%;
  background-color: grey;
  margin-right: 5px;
}

<div id="container">

  <div id="menu">

    <p>Btn</p>
    <p>Btn</p>
    <p>Btn</p>

  </div>

  <div class="otherDivs"></div>
  <div class="otherDivs"></div>
  <div class="otherDivs"></div>

</div>