Fazer um item flexível agir como um bloco de visualização [duplicado]

Então eu tenho um recipiente que usa o display flex, então 4 divs dentro do qual o primeiro precisa agir como se fosse usado o display block e os outros 3 precisam ser como eles são.

demonstração do excerto de códigos:

#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>
Como faço para que o menu apareça por cima dos outros divs?

Eu sei que podia pôr o menu div fora do contentor, mas preciso de o manter dentro do contentor onde está, porque estou a usá-lo com abas Jquery.

Author: Temani Afif, 2017-12-15
Source

4 answers

Você deve adicionar um flex-basis: 100% a #menu, e permitir que os itens cinzentos para ir para uma nova linha, aplicando flex-wrap: wrap; para #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>
 18
Author: Itay Ganor, 2017-12-15 22:28:23

Se o objectivo é fazer com que um item flex ocupe uma linha inteira, então configure-o para flex-basis: 100%, e ACTIVE wrap no contentor. Isto faz com que o item de largura completa force itens subsequentes para a próxima linha.

#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>
 2
Author: Michael Benjamin, 2017-12-15 22:28:56

Você pode adicionar uma grande margem-direita e usar a rolha de voo no recipiente (como uma alternativa à solução comum usando width:100% ou flex:0 0 100%).

Com esta solução você também pode especificar uma largura e outro elemento irá sempre para a próxima linha (como fazemos com um elemento de bloco).

#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
Author: Temani Afif, 2017-12-15 23:51:06
Sugiro adicionar uma classe como"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>
 0
Author: ChiefAlu, 2017-12-15 22:42:59