使弹性项目像显示块一样

Question

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

代码段演示：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如何让菜单显示在其他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>

Answer 2

如果目标是使Flex项占据整行，则将其设置为flex-basis: 100%，并在容器上启用wrap。这会导致全宽度项目强制后续项目到下一行。

＆＃13;

＆＃13;

#container {
  display: flex;
  flex-wrap: wrap;   /* NEW */
}

#menu {
  flex: 0 0 100%;    /* NEW */
  display: flex;
}

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以添加一个大边距并在容器上使用flew wrap（使用width:100%或flex:0 0 100%作为常见解决方案的替代方法。）

使用此解决方案，您还可以指定宽度，其他元素将始终转到下一行（就像我们使用块元素一样）。

＆＃13;

＆＃13;

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

}

#menu
{
  display: flex;
  margin-right:100%;
  
  /* To illustrate the add of width*/
  width:200px;
  border:1px solid;
  /* */
}

#menu p
{

margin: 0;
padding: 8px;
padding-bottom: 0;

}

.otherDivs
{

height: 700px;
width: 10%;
background-color: grey;
margin-right: 5px;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

我建议添加类似＆＃34; break-here＆＃34;

的课程

＆＃13;

＆＃13;

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

#menu
{
  display: flex;
  flex-grow: 1;
}

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

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

.break-here {
  flex-basis: 100%;
}

＆＃13;

<div id="container">

  <div id="menu">
  
    <p>Btn</p>
    <p>Btn</p>
    <p>Btn</p>
  
  </div>
   
  <span class="break-here"></span>

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

</div>

＆＃13;

＆＃13;

＆＃13;