Сделайте так, чтобы гибкий элемент действовал как блок отображения

Question

Таким образом, у меня есть контейнер, который использует display flex, а затем 4 делителя, внутри которых первый должен действовать так, как будто он использует блок отображения, а остальные 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>

Answer 2

Если цель состоит в том, чтобы гибкий элемент занимал всю строку, установите для него значение 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>

Answer 3

Вы можете добавить большое поле справа и использовать обтекание контейнером (в качестве альтернативы общему решению, использующему 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>

Answer 4

Я предлагаю добавить класс вроде "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>