- This topic is empty.
September 2, 2016 at 4:01 am #245137
Flexbox is probably the simplest…you can use your existing CSS and just add
display:flexto your rows (sections in this case)…and, bingo equal height.
This is nice because you have a fallback in case the broswer doesn’t support flexbox.
CSS Tables are a little trickier as margins are off etc. Support it better (IE8) but the extra work (and possibly extra markup) probably isn’t worth it.
Of the two, flexbox is the future…and support is pretty good.September 2, 2016 at 9:19 am #245155
Thank you, that looks very promising.
One question about the flexbox approach … you add the .tall class and apply it to the middle content. Does it depends on the middle content always being the tallest, or how does this function?
Edited to add: nevermind, now I see you did that just to demonstrate, of course!
However, I am testing out display:flex on the site, and it seems to come with an unfortunate side-effect for a responsive design — the columns no longer stack on top of each other below the break point, so the effect of collapsing the site to a single column is lost.September 2, 2016 at 9:56 am #245156
That where setting
Chris has THE definitive guide to flexbox right here….search it out. I use it all the time.September 2, 2016 at 10:26 am #245158
Alright, will check it out, see if I can make sense of it and of where to set the flex-wrap:wrap. :) This layout is my first time with a responsive design and I can’t say I have my head fully wrapped around how the css I am using is actually working.September 2, 2016 at 1:31 pm #245168
Basically, a flex-container won’t wrap it’s contents unless specifically told it’s allowed…with
Note: CSS Tables, like actual tables, won’t wrap regardless.
So, if set that it’s just a matter of a media query to change the width (or more likely the flex values) of our columns to 100% at a lower viewport size.September 3, 2016 at 2:07 am #245175
Thanks a lot, I have the basic implementation working now. :) And I will definitely be looking at using more of flexbox for some elements, like galleries.
I am also pondering if flexbox might make sense for a horizontal menu that you want to turn vertical at small sizes, instead of the usual list floated left. Though of course the list allows for submenus.September 3, 2016 at 6:31 am #245178
Indeed…if I see anything in a line (or a column for that matter), my first thought is flexbox these days.
But the same was true of floats and
inline-blockwhen they first were added to CSS.
Flexbox for menus is no different than floats/inline-block…positioning with flexbox is exactly the same regardless, so everything you were doing still works.
Flexbox isn’t a magic bullet that solves all issues but it goes a long way to solving many of the problems associated with linear layout methods.
CSS Grids also show promise to me but I find them incredibly complex and the syntax is confusing (at least to me)…plus I’m not convinced they’re much better than flexbox.
Flexbox will really come into it’s own once
display:contentsgets more support as it will allow us to wrap and unwrap flex-containers at will…then more complex layout that flexbox can’t achieve now will be child’s play.September 6, 2016 at 10:31 pm #245274
I love Flexbox… it’s the future as you said. But even if the first time it appeared was 7 years ago (!?!!?), the thing is its support seems limited.
I’m not speaking about ie 8-9 which represent 1% of the total browser usage… nor IE 10-11 which support it near entirely with vendor prefix. The problem seems to be on iOS.
Just do the test, in a site like https://www.browserstack.com/responsive and you’ll see that your flexbox element will not show up.
That the only point which irritates me about flexbox: the lack of support… even if it becomes more and more supported with months. I’m using an overal home made grid for my general responsiveness, and use flexbox only for some specific element yet. With better native support, I would already forgotten my old grid for a flexbox one. Cleaner, easier, faster…September 6, 2016 at 11:22 pm #245277
Well that’s IOS and Safari for you…underdeveloped and non-supportive of many features that are well out of beta for all other browsers.
They’re so far behind the curve it should be embarrassing for them but, no, they keep plowing along ignoring the obvious.
Until we stop using sub-standard products like that they won’t learn.September 7, 2016 at 6:56 am #245287
I agree, but if you expect to monetize your site, you have to take this into account. Related to this, this is a lot of people to take care about : https://www.w3counter.com/globalstats.phpSeptember 7, 2016 at 7:17 am #245291bearheadParticipant
caniuse reports that flexbox is supported by iOS safari and Opera Mini:
Support is at almost 97%… that’s higher than css 2d transforms
If you’re having problems with those two browsers then the issue is probably something unrelated to flexbox support.September 7, 2016 at 7:35 am #245292
The thing is https://www.browserstack.com/responsive is using very outdated browser/OS. That’s the issue, my flexbox css is properly written. Allright, i’ll maybe think about a flexbox grid for my overall website setting, instead of my old one.
I hope i’m not doing the bad choice.September 7, 2016 at 8:20 am #245294bearheadParticipant
I think you’ll be fine as long as long as no support for ie8/9 is ok. iOS safari support for the new flexbox syntax goes back as far as 7.1, and caniuse reports that versions 6.1-3.1 of iOS have less of a market share than ie6 o.O
Make sure you’re using browser prefixes…September 7, 2016 at 9:17 am #245296
I don’t care of IE 8/9, only some pharma corp uses it… I’m using autoprefixer, so it will ok for prefix vendor.
- The forum ‘CSS’ is closed to new topics and replies.