Make a flex item act like display block

Question

So I have a container which uses display flex, then 4 divs inside which the first one needs to act like it is used display block and the 3 others need to be as they are.

Code snippet demonstration :

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

How do I get the menu to display above those other divs?

I know I could just put the menu div out of the container but I need to keep it within the container where it is because I am using it with Jquery tabs.

score 24 · Accepted Answer · answered Dec 15 '17 at 22:28

You should add a flex-basis: 100% to #menu, and allow the gray items to go to a new line by applying flex-wrap: wrap; to #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>

score 4 · Answer 2 · answered Dec 15 '17 at 22:28

If the goal is to make a flex item occupy an entire row, then set it to flex-basis: 100%, and enable wrap on the container. This causes the full width item to force subsequent items to the next line.

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

Temani Afif · Answer 3 · 2017-12-15T23:51:06.140

You can add a big margin-right and use flew wrap on the container (as an alternative to the common solution using width:100% or flex:0 0 100%).

With this solution you can also specify a width and other element will always go to the next row (like we do with a block element).

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

score 1 · Answer 4 · answered Dec 15 '17 at 22:42

I suggest to add a class like "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>

Make a flex item act like display block

4 Answers4