CSS Display Flex - can it 'clear' a row on mobile?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

CSS Display Flex - can it 'clear' a row on mobile?

Post by simonmlewis »

We have a page of company logos, and uses flex:1 so it has four across.
But on mobile I want it to be two across.

Is there a tweak to the CSS I can make to force it to be four across within the DIV?

Code: Select all

<div class='employers-flex'>
<div class='employers-logo'><img src='/images/logo-abk.jpg' alt='logo abk' /></div>
<div class='employers-logo'><img src='/images/logo-angloholt.jpg' alt='angloholt' /></div>
<div class='employers-logo'><img src='/images/logo-cambridgeshire.jpg' alt='cambridgeshire' /></div>
<div class='employers-logo'><img src='/images/logo-camden.jpg' alt='camden' /></div>
</div>

<div class='employers-flex'>
<div class='employers-logo'><img src='/images/logo-enfield.jpg' alt='enfield' /></div>
<div class='employers-logo'><img src='/images/logo-espo.jpg' alt='espo' /></div>
<div class='employers-logo'><img src='/images/logo-greenwich.jpg' alt='greenwich' /></div>
<div class='employers-logo'><img src='/images/logo-harrogate.jpg' alt='harrogate' /></div>
</div>

<div class='employers-flex'>

<div class='employers-logo'><img src='/images/logo-morgan.jpg' alt='morgan' /></div>
<div class='employers-logo'><img src='/images/logo-richmondshire.jpg' alt='richmondshire' /></div>
<div class='employers-logo'><img src='/images/logo-wandsworth.jpg' alt='wandsworth' /></div>
<div class='employers-logo'></div>
</div>
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: CSS Display Flex - can it 'clear' a row on mobile?

Post by requinix »

Sounds like your minimum widths aren't set up appropriately. You should be able to set those such that on desktop displays there's room for 4 and on mobile only room for 2.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS Display Flex - can it 'clear' a row on mobile?

Post by simonmlewis »

How do I do that? All I know is display: flex, for the container. and Flex:1 for each div.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: CSS Display Flex - can it 'clear' a row on mobile?

Post by requinix »

If you don't know any CSS then you shouldn't be messing around with this. Ask your web designer to do it.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS Display Flex - can it 'clear' a row on mobile?

Post by simonmlewis »

I know it. Trust me I know a LOT of CSS. But Flex is still new to me.
Thanks for the 'nice' reply!
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: CSS Display Flex - can it 'clear' a row on mobile?

Post by requinix »

Okay, then use your lots of CSS experience to set minimum widths on the logo things. If you need a refresher, it's "min-width". And while you're in there, breaking the logos into groups of four in the markup defeats half the purpose of flex. Put them all in the same flex container.

This is all going with the assumption that when you say you want 4/2 you actually need however-many per row that fits with everything else moving down. As in your standard inherently-responsive floating layout but with flex's benefit of resizing the child objects to fit each row. If you want literally 4 rows on desktop and 2 rows on mobile with no variation or fluidity then you need media queries and stricter layout rules, but we can cross that bridge if we come to it.

Example - un/comment the desktop and mobile body widths (which aren't rules you'd use in your actual CSS) to see the resizing.

If the example isn't compatible with your page layout then I need to know what your page layout is like.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS Display Flex - can it 'clear' a row on mobile?

Post by simonmlewis »

I can see where you are going with this. I only learnt that display: flex, and flex: 1 will mean everything in the containing DIV will flex out evenly. That is why they are in individual containers. Not done the min-widths before.

So to make it work as I want, responsive, I need to put all the inner divs into one container. Set the container to be display: flex, and for desktop, the innerdivs to be a min-width of 33%, and for mobile, the innerdivs to be min-width of 45%?

Is that basically it?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS Display Flex - can it 'clear' a row on mobile?

Post by simonmlewis »

Got it.
Put them all in the one container DIV. And use this CSS:
It's the "wrap" but I needed, plus the min-width. Makes sense now.

Code: Select all

.employers-flex
{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.employers-logo
{
   min-width: 200px;
flex: 1;
margin-bottom: 30px;
}

.employers-logo img
{
max-width: 100%;
}
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: CSS Display Flex - can it 'clear' a row on mobile?

Post by requinix »

A min-width with an absolute value (like 200px) is the key. A relative value (like 33% or 45%) would work too but then you'd have to specify one for mobile and desktop, which is what I'm trying to avoid doing. 200px means you don't need any device overrides.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: CSS Display Flex - can it 'clear' a row on mobile?

Post by simonmlewis »

We do have one for mobile and one for desktop, so on Desktop it is 3 across, and on mobile it is two across.
If it was fully 'stretchy' responsive, it would have to be percentages. With one perhaps for smaller tablets too.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply