Position 2 items per row in flexbox

Question

this is my html structure.


   Some title 
   Element 1
   Element 2
   Element 3

The CSS for the parent is

.parent {
    display: flex;
    flex-wrap: wrap; 
    flex-direction: row;
}

In the desktop view, the elements look like this:

Some Title   Element1   Element2  Element 3

When the window is smaller, the elements wrap like this:

Some Title   Element1   Element2  
Element 3

Is there a way to put two elements per row when the wrap property starts to take effect? Like this:

Some Title   Element1 
Element2     Element 3

user_1703696 · Answer

Flex-basis sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing. You can learn more from the MDN docs.

Thanks to @Bart Hofland.

.parent {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    border: 1px solid red;
}

.parent > div {
   flex-basis: 25%;
}



@media only screen and (max-width: 400px) {
  .parent > div {
     flex-basis: 50%;
   }
}


   Some title 
   Element 1
   Element 2
   Element 3

Position 2 items per row in flexbox

1 Answers