Flex Items in Two Rows

HTML & CSS
1 
<div class="flexbox">
    <div class="one"></div>
    <div class="two"></div>
</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>
2

Yes.

The children of a flexbox can be flexboxes as well.

3

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

2 Likes
4

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

5

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
6

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

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0;}
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.flexbox > div {
	border:1px solid red;
	padding:10px;
}
.flexbox, .one, .two {
	display:flex;
}
@media screen and (max-width:980px) {
	.flexbox {flex-wrap:wrap;}
	.flexbox > div {
		flex:1 0 100%;
		justify-content:center;
	}
}
</style>
</head>

<body>
<div class="flexbox">
  <div class="one">Content</div>
  <div class="two">Content</div></div>
</div>
</body>
</html>
7

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