使弹性项目像显示块一样[重复]答案

【问题标题】：Make a flex item act like display block [duplicate]使弹性项目像显示块一样[重复]
【发布时间】：2018-05-30 03:42:54
【问题描述】：

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

代码 sn-p 演示：

#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 选项卡一起使用。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

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

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

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

}

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

【讨论】：

【解决方案2】：

我建议添加一个像“break-here”这样的类

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

您应该将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>

【讨论】：