Streaming live at 10am (PST)

Is Flexbox 2-UP Possible?


#1

Hey guys,

Ok so I have Flexbox working the way I need it, but was wondering if there was a way to have the following...

I have a 4 Child Flexbox Div so...

1 - 1 - 1 - 1

What I'm trying to get done is this at the Tablet break point...

1 - 1
1 - 1

...then at the Phone break point...

1
1
1
1

Hope that makes some sort of sense. Would be great if someone could point me in the right direction.

Cheers!


#2

For the width of the child divs use 25% at desktop, 50% at tablet and 100% for mobile. Good luck.


#3

Tried that, but it didn't seem to work. Here're a link to what I'm building...

(It's the footer with the 4 DIVs)

https://preview.webflow.com/preview/macjunky-v5?preview=23dd386c8748ff8065617c197ea887c6


#4

Hi @Kia,

I am sure there are many solutions to this. I'll share with you the way I do it mostly, as I want as much flexibility as possible and also keeping the site performance in mind.

Warp your flex items in two divs. Div#1 gets 2 items, Div#2 gets two items. Then set these Divs (they are now your flex items) to Stretch.

Screenshot of tablet view as proof.

Maybe somebody else has a better way to do it :slight_smile:

Best,
Karl-Heinrich


#5

Thanks Tobias [@Karl-Heinrich] I'll give that a go!


#6

Alternatively, use the flex settings for the Contact Container, make sure it's set Horizontal, then check Wrap Children.
Styling for Child Divs

For Tablet
Set all child divs to 40% width
Add 50px bottom Margin to 4-4
Gives you this

For Mobile Landscape
Set all Child Divs to 40% Width
Two right hand divs (2-4 and 4-4) give 5% left Margin
Gives you this

For Mobile Portrait
Set all Child divs to 80% Width
Remove the two 5% margins on 2-4 and 4-4, gives you this

Hope this helps


#7

Ok figured it out, it's this...

[Wrap Children]

Now I need to make them 'stick' to the left & right and not centred. :sunglasses:


#8

Deleting your read-only is probably the best way to achieve this :wink: