Page 1 of 1

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

Posted: Tue Aug 29, 2017 2:32 pm
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>

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

Posted: Tue Aug 29, 2017 2:48 pm
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.

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

Posted: Tue Aug 29, 2017 2:58 pm
by simonmlewis
How do I do that? All I know is display: flex, for the container. and Flex:1 for each div.

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

Posted: Wed Aug 30, 2017 1:23 am
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.

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

Posted: Wed Aug 30, 2017 1:46 am
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!

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

Posted: Wed Aug 30, 2017 3:50 am
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.

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

Posted: Wed Aug 30, 2017 4:22 am
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?

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

Posted: Wed Aug 30, 2017 4:38 am
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%;
}

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

Posted: Wed Aug 30, 2017 5:59 am
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.

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

Posted: Wed Aug 30, 2017 6:08 am
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.