Flex Items in Two Rows

<div class="flexbox">
    <div class="one"></div>
    <div class="two"></div>

I have a situation in my actual project similar to the above one.

.flexbox, .one, .two {display:flex;}

Is it possible, say in some responsive width that we can put these two in two different rows→

<div class="one"></div>
<div class="two"></div>


The children of a flexbox can be flexboxes as well.

Yes just set them to 100% wide (flex:1 0 100%) and ensure that the parent is set to flex-wrap:wrap;


It worked. sir, can we add something so that we can set the content in the horizontal middle after implementing what you told.

What does the CSS Tricks article say about vertically and/or horizontally centering content in a flexbox? Try some flex properties while you’re waiting :bulb:
Let us know what happens.

1 Like

We would need to see the html and css you are using but the basics are like this:

<meta charset="utf-8">
<title>Untitled Document</title>
html {
  box-sizing: border-box;
*, *:before, *:after {
  box-sizing: inherit;

.flexbox > div {
	border:1px solid red;
.flexbox, .one, .two {
@media screen and (max-width:980px) {
	.flexbox {flex-wrap:wrap;}
	.flexbox > div {
		flex:1 0 100%;

<div class="flexbox">
  <div class="one">Content</div>
  <div class="two">Content</div></div>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.