9

Ask DN: Do you use the Flexbox property?

over 9 years ago from , Product Designer / Prototyper @ Udemy | drewkoch.com

I've been reading a lot about the Flexbox property recently, and I am curious to hear who actually uses it and if so, how you use it in your code. Do you layout your entire page using it, or just pieces of your layout? What is your opinion of it?

Muchos gracias :)

14 comments

  • James ThomasJames Thomas, over 9 years ago

    I think it's a great way forward for flexible site layouts, so I developed FlexGRID using it. http://www.volumethemes.com/flexgrid

    3 points
  • Diego LafuenteDiego Lafuente, over 9 years ago

    Absolutely no. There's no point in use something when the support on all browsers is really recent. When I see all the major versions are a bit ahead in use, I will consider it.

    The only way now to use Flexbox is using it on a closed garden project like an app for Android or iOS.

    1 point
  • Marc EdwardsMarc Edwards, over 9 years ago

    I don’t yet, but support is almost good enough for me to dive in and use it in production code. Looks really handy.

    1 point
  • Gadzhi KharkharovGadzhi Kharkharov, over 9 years ago

    I use it a lot for prototyping. It actually makes much more sense to me than all other css positioning techniques.

    You can easily design quite a complex responsive layout using only flex properties and you don't even need a grid for that.

    0 points
  • Giulio MichelonGiulio Michelon, over 9 years ago

    I don't because I'm bothered about backward compatibility.

    0 points
  • Stelian FirezStelian Firez, over 9 years ago

    I used it recently in combination with contenteditable.

    One thing I discovered in Chrome Canary(35.0.1905.0) is that if you have contenteditable set to true on one of the children, the height of that child will not adjust after you remove some of its contents. It will just keep the maximum height reached.

    The fix involves adding "align-items: flex-start;" to the parent(the one that has the flex property).

    0 points
  • Javin LadishJavin Ladish, over 9 years ago

    It's awesome, but all the times I've played with it I got less than desirable results cross-browser. Performs great in Chrome though!

    0 points
  • Jacob BuckJacob Buck, over 9 years ago

    I've started using it in situations where a float-based grid won't work, and can fall back to display: table. I also only use display: flex, and ignore earlier implementations.

    0 points
  • Varun VachharVarun Vachhar, over 9 years ago (edited over 9 years ago )

    Used it in my last two projects. Apart from the obvious grid layouts, etc ... it really comes in handy when you want a div to expand and fill the remaining space – horizontally or vertically.

    0 points
  • Adam T.Adam T., over 9 years ago

    What does this provide that you can't accomplish with inline-table & vertical-align top along with percentage based widths for divs or li? Just curious what the difference is.

    0 points
    • Tiago DuarteTiago Duarte, over 9 years ago (edited over 9 years ago )

      This article is a great introduction to Flexbox and why it's an amazing addition to CSS.

      The Flexbox Layout module aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

      Most importantly, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically-based and inline which is horizontally-based). While those work well for pages, they lack flexibility to support large or complex applications (especially when it comes to orientation changing, resizing, stretching, shrinking, etc.).

      I haven't used it yet as I thought the browser support was low, but it turns out it's actually pretty decent! http://caniuse.com/#feat=flexbox

      1 point
  • Steve McKinneySteve McKinney, over 9 years ago (edited over 9 years ago )

    I use it sparingly, mostly for things like equal height columns. I use it a fair bit to change order of elements when necessary. Basically things that if flexbox isn't supported it's not going to majorly break anything. I wish I could use it more intensively as it's great for layout, as expected.

    The things that cause me to use it sparingly is Modernizr detection hasn't always been ideal saying that IE10 supports it (but it is an older version). I know they're going to improve that when Modernizr v3 comes out. Also firefox didn't support the key properties up until recently, which caused me a lot of problems.

    0 points
  • Howard JonesHoward Jones, over 9 years ago

    I just began using it for a small part of a site I'm working. It's a rather complicated form with many input elements that are laid out in a row. I'm using flexbox for anything tablet sized and under (< 768px). Takes a bit of trial and error to get the different properties to play nice, but I can already see it's going to be a great tool. I wish I could use it more broadly, but unfortunately we've gotta support some of the crustier desktop browsers that don't offer flexbox support.

    0 points