PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Sun Oct 22, 2017 1:38 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 9 posts ] 
Author Message
PostPosted: Tue Feb 28, 2017 9:19 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
We need to evenly spread a three column or six column set of DIVs.
If 5, 20%. If 4, 25%. But cannot do 16.6% as it doesn't snap to fit.

Is there some flex code or CSS we do to make it spread to fit the screen evenly?

I tried flex:1, but that seems to compress rather than stretch them out.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Tue Feb 28, 2017 9:31 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6390
Location: Montreal, Canada
simonmlewis wrote:
We need to evenly spread a three column or six column set of DIVs.
If 5, 20%. If 4, 25%. But cannot do 16.6% as it doesn't snap to fit.

Is there some flex code or CSS we do to make it spread to fit the screen evenly?

I tried flex:1, but that seems to compress rather than stretch them out.

Did you set the parent to display: flex?

http://codepen.io/anon/pen/NpGgvJ

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Feb 28, 2017 9:52 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
Oh that's how. So what about if I Want to make it three across on a mobile?
Do I then need to add some percentages?

I basically want six across on desktop, and 3 across (2 down) on mobile.
I can see without the percentages how the flex works.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Tue Feb 28, 2017 10:04 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6390
Location: Montreal, Canada
flex-wrap: wrap on the parent and a min-width on the children should do it.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Tue Feb 28, 2017 10:10 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
I see. so a min width of say 30%... which forces it to be roughly 3 across and it snaps into place? Clever.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Tue Feb 28, 2017 11:20 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
Got it. Works a treat.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed Mar 01, 2017 4:06 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
the flex-wrap doesn't work in safari on an iphone. the DIVs all spread out rather than wrapping.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed Mar 01, 2017 7:38 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6390
Location: Montreal, Canada
http://caniuse.com/#feat=flexbox
Maybe there's something helpful to be found here? It claims to be supported but Safari has somewhat become the new IE, so I am not surprised there are issues.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri May 19, 2017 3:34 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
I really like CSS like this:

Syntax: [ Download ] [ Hide ]
.responsive-row
{
width: 25%;
width: calc(100% / 4);
float: left;
text-align: center;
margin-bottom: 20px;
}

Issue is, if I have five on some pages, or six, then it goes to a new row.
I think it might look nice if they centered.
Im not certain. But there are instances where there will be four across then one more. Or two.

So can it be centered in the containing DIV?
Attachment:
File comment: Example of solution i want.
ss.jpg
ss.jpg [ 24.08 KiB | Viewed 1390 times ]

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: Google [Bot] and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group