/    Sign up×
Community /Pin to ProfileBookmark

Two Row Flexbox?

Copy linkTweet thisAlerts:
Aug 23.2017

Hey there, I’m pretty new to the flexbox stuff.

Right now, I have four boxes aligned in one row using a flexbox:
[url]https://codepen.io/anon/pen/JyZerp[/url]

I want to make it more responsive and make it two rows (each with 2 boxes) at a certain breakpoint.

So …
@media screen and (max-width: 500){
… code here to make the flexbox two rows instead
}

Any thoughts?

Thanks!

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERAug 23.2017 — Would this work for you? ?

<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt; HTML5 page &lt;/title&gt;

&lt;style&gt;
.container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
background-color: lightgrey;
}
.item {
background-color: cornflowerblue;
width: 200px;
height: 200px;
margin-right: 10px;
margin-top: 3px;
}
@media only screen and (max-width: 500px) {
.container div { background: #ff0; }
.item { width: 250px; }
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div class="container"&gt;
&lt;div class="item"&gt;Box 1&lt;/div&gt;
&lt;div class="item"&gt;Box 2&lt;/div&gt;
&lt;div class="item"&gt;Box 3&lt;/div&gt;
&lt;div class="item"&gt;Box 4&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@cootheadAug 24.2017 — Hi there cbVision,

[indent]

if your really want [b]fixed dimension[/b] boxes then I would

suggest that you should use [i]"float"[/i] rather than [i]"flex"[/i]. ?

[color=navy]
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;untitled document&lt;/title&gt;

&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;

&lt;style media="screen"&gt;
.container div {
float: left;
width: 12.5em;
height: 12.5em;
margin: 0.3125em;
background: #f00;
}

@media ( max-width: 55em ) {
.container div:nth-of-type(3){
clear: left;
}
}

@media ( max-width: 27.5em ) {
.container div:nth-of-type(2){
clear: left;
}
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
&lt;div&gt;Box 1&lt;/div&gt;
&lt;div&gt;Box 2&lt;/div&gt;
&lt;div&gt;Box 3&lt;/div&gt;
&lt;div&gt;Box 4&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;[/color]

[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@cbVisionauthorAug 24.2017 — Sorry, I should have noted that I'm only using flex to get the same height for all the boxes. I want it to expand all the way across the screen and the height will be depended on the content of the tallest box. See this example:

https://codepen.io/anon/pen/JyBRBV

Typically, I would do a float and then set the width to 50% when I wanted 2 boxes to a row instead of 4. This is my first attempt at really getting flex to work. Float isn't ideal because it doesn't handle the equal heights.

I thought I could just set the width to 50% in the example above and it would snap down, but it doesn't seem to have any affect.
Copy linkTweet thisAlerts:
@cootheadAug 24.2017 — Hi there cbVision,

[indent]

Here is the revised flex version...

[color=navy]
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;

&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"&gt;

&lt;title&gt;untitled document&lt;/title&gt;

&lt;link rel="stylesheet" href="screen.css" media="screen"&gt;

&lt;style media="screen"&gt;
body {
background-color: #f0f0f0;
font: 1em/150% verdana, arial, helvetica, sans-serif;
}

.container {
width: 52.5em;
padding: 0.25em;
margin: auto;
border: 0.062em solid #999;
display: flex;
flex-flow: row wrap;
justify-content: center;
background-color: #fff;
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 );
}

.container div {
width: 12.5em;
padding: 1em;
margin: 0.3125em;
border: 0.062em solid #000;
box-sizing: border-box;
background: #f00;
}

@media ( max-width: 55em ) {
.container {
width:26.25em;
}
}

@media ( max-width: 29.5em ) {
.container {
width:13.125em;
}
}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
&lt;div&gt;
&lt;p&gt;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero
bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh,
posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat.
Curabitur et volutpat nibh.
&lt;/p&gt;
&lt;/div&gt;
&lt;div&gt;Box 2&lt;/div&gt;
&lt;div&gt;Box 3&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;
Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta,
sapien nec molestie molestie.
&lt;p&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;[/color]

[/indent]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@SempervivumAug 24.2017 — I thought I could just set the width to 50% in the example above and it would snap down, but it doesn't seem to have any affect.[/QUOTE]Additionally you have to set flex-wrap to wrap. Check it this is what you require:

https://jsfiddle.net/tsx43yv0/6/

The height of the containers adjusts to their content and is equal in each line.
Copy linkTweet thisAlerts:
@cbVisionauthorSep 01.2017 — This is good stuff. Thanks fellas!
×

Success!

Help @cbVision spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...