The WordCamp Sacramento volunteers got the speaker videos edited and posted in record time this year. Since I outlined my talk in the previous post, I won’t repeat the content here, but will mention a few of the questions from the audience afterward.
Flexbox Q & A (Supplemented with Later Research)
Does the flex container have to be a block element? Can you use a <span>?
I’ve never tried using a span as a flex-container. Later consultation of the Flexbox spec makes it clear that once you apply display:flex to an element, both it and all its children behave like block elements.
Does Flexbox work on Lists?
Yes, if you make the <ul> element the flex-container and the <li> elements the flex items.
What percentage of the browsers actually out there in the wild support this now?
All the mobile browsers support it, and people usually update those more often than their desktop browsers. It’s mostly just older IE where it doesn’t work. (You too may have clients who still use older versions of IE.)
I tried out the Flexibility.js polyfill and I wondered if you had some thoughts on it.
I haven’t used it, and when I looked at it, it seemed pretty finicky. But it was created by 10Up, and there are people here from 10Up. Ask them, because they can give you a much better answer than I can.
Is there any chance Flexbox works on Email?
Email design is worse than dealing with IE6, but someone actually tested it–extensively.
What are some of the problems you’ve run into with Flexbox?
Sometimes the results surprise you, and you’ll need to write media queries so you don’t end up with three small elements in one row and one large element in the next row. Sometimes I get confused about my flex-direction and whether I need align or justify. And if you add another wrap, you’ll need to move the display: flex declaration.
Have you tried rewriting an existing WordPress theme to use Flexbox?
Not yet. I haven’t had time, but I’ve used it withing several WordPress themes. Somewhere in my copious spare time I’m going to create my own Genesis starter theme and it will be based on Flexbox.
Are there Flexbox frameworks?
There are some flex layouts included in Bootstrap and Foundation. There’s also a CSS grid layout framework called Flexington created by Mike Hemberger. There’s also a new module coming for CSS grids, but it’s still an experimental feature.
What are some good examples of websites that use Flexbox?
The site I took most of my examples from is NowSecure.com, my most recent project, where I used Flexbox for All the Things. But pretty much everything I’ve built in the last year has Flexbox in it somewhere.
Featured image photo credit: John Locke.
Leave a Reply