FlexboxPatterns

Build awesome user interfaces with CSS flexbox

10 followers

Build awesome user interfaces with CSS flexbox

10 followers

Visit website

Interface design tools

•

Design resources

Launch tags:Design Tools•Developer Tools•Tech

Launch Team

AWS Startup AdvisorPersonalized AWS guidance that meets you where you’re already building

Promoted

Great but what about "browser support"? https://css-tricks.com/using-fle... It's pain in the a** but i always have to do something like this: display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: space-between; -moz-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-items: stretch; -moz-align-items: stretch; -ms-align-items: stretch; align-items: stretch;

Report

10yr ago

FlexboxPatterns

Maker

@thibaut_lacave Take a look at PostCSS and Autoprefixer (https://github.com/postcss/autop...). After you write/compile your CSS, PostCSS will run through it and add vendor prefixes for all of your properties to ensure cross-browser compatibility. It's very well-maintained and basically works like magic. I've found it indispensable.

Report

10yr ago

Great, thanks @thecjcenizal . Still, are you considering adding the prefixes in your samples? (great simple designs btw)

Report

10yr ago

FlexboxPatterns

Maker

@thibaut_lacave Thank you! I don't think I'll add the prefixes because I think there are better resources out there for learning about them, and they'll make it more difficult to read the code examples.

Report

10yr ago

This project is really helpfull. I am making a similar project. Want to check check? Here is the link http://moshfequr.com/flexbox-lay...

Report

8yr ago

As someone that has been wanting to use flexbox more this should be awesome. Excited to give this a try!

Report

10yr ago

All or Nothing

Very cool. Especially considering how platforms like React Native are adopting variations on Flexbox for controlling layouts.

Report

10yr ago

package it as small framework footprint. Future, developers can build sites that ready for Google AMP / FB instant

Report

10yr ago

Swap Ideas

Should this be viewed as a replacement for e.g. Bootstrap?

Report

10yr ago

FlexboxPatterns

Maker

@tribaling Hmm... I would say probably not, since Bootstrap covers way more use cases than these humble examples do. But I think they could definitely help someone who wanted to build a Bootstrap-alternative. Would you like to see a Bootstrap replacement? Is Bootstrap not meeting your needs?

Report

10yr ago

Swap Ideas

@ptrkcsk Thats good news, thanks

Report

10yr ago

Beautiful design, straight-forward explanations. I'm wondering what scrollbar lib he's using here...

Report

10yr ago

@robotnoises I'm unsure but I doubt using a polyfill for it. Most certainly just prefixed "scrollbar-thumb" CSS property. Scrollbar hacking with js is highly questionable anyways.

Report

10yr ago

FlexboxPatterns

Maker

@andmitsch @robotnoises You're right, Andreas, it's just a few webkit-specific CSS scrollbar properties. Here's a CodePen of the mixin I use: http://codepen.io/cjcenizal/pen/...

Report

10yr ago

@thecjcenizal Thanks for sharing!

Report

10yr ago

1 2 3

Pros

Cons

Reviews