9 ms·

I've moved away from float entirely and mastered the Flexbox. Which has made my live easier.

by neals 10y ago

masklinn 10y ago
Floats remain useful for their original purpose: floating an inset piece of content inside a wider textual context e.g. an illustration picture or a pull quote. And for that you might still need a clearfix-type workaround.
davnicwil 10y ago
Yes, and further to this - genuine question - Why would you use float-based layouts over flexbox for reasons other than backwards compatibility? About the only reason I can think of off the top of my head is that you / your team already fully grok floats, they are sufficiently powerful for your use case, and you don't want to invest the time to learn flexbox to achieve the same outcome as you could already achieve.
- andrei_says_ 10y ago
  Susy grid system is currently float-based and the most efficient way I'm aware of to create semantic CSS layouts with wide compatibility. http://susy.oddbird.net/ http://susy.oddbird.net/
Bahamut 10y ago
In this case, flexbox actually is a bit awkward - one is often forced to pair flexbox with calc in this sort of situation. If the content, including text, is too long, it pushes the right container down a level unless the width is fixed to an appropriate size - this is doable with calc (for fluid layout) if one has control over the size of the left container, but otherwise it may be difficult to obtain the desired UI with flexbox.
devwastaken 10y ago
I really like flexbox, but its still missing functionality and somewhat misleading in its options. Everything is row-column based, but you can select between row or column, but in the column option, only justify-content will position content vertically. If you want something like forcing an element to be in the middle vertically, and have an element above it, you can't do that. align-self only works on rows. I really don't understand why they didn't make it work vertically if you have column mode.
- mark242 10y ago
  A flexbox "column" can also be a row. You can have a container item centered vertically and also have it include two items.
  - devwastaken 10y ago
    In this case, I needed two children elements, one would be centered vertically in the column, and the other would be at the top of the column, but they would not effect each others position. I could only make one where the two elements were next to each other, or they effected each others positions, so the centered element was not actually centered. I ended up putting in three elements, the bottom one the same size as the top, but hidden, so the center element would stick between the two.
- j_r_f 10y ago
  It's all about the nested flex'd elements.
  - devwastaken 10y ago
    Do you have an example that would accomplish that? As in, one element centered vertically to the parent flexbox, and its sibling attached to the top of the column, but not effecting each others position?
Xcelerate 10y ago
Is there any reason to not use flexboxes nowadays? I've still been using floats, inline-block, etc. so my websites are compatible with older browsers, but I would rather just switch to using all of the new CSS properties.
- noxToken 10y ago
  There are a couple of bugs with IE and older versions of the stock (deprecated) Android browser using flexbox, but I think they're all handled easily enough. Also, they don't work with IE9 - God forbid you're still supporting that browser.
  - robin_reala 10y ago
    Still supporting IE8, and testing components in IE7. 150k visits last month from IE7, sigh.
    - ryanSrich 10y ago
      150k? That's insane. What's the location for those visits? I'm kind of intrigued.
      - robin_reala 10y ago
        Well, that’s out of ~90m visits a month total. This is for GOV.UK, so I suspect most of them are government internal.
        pbhjpbhj 10y ago
        Do you think Gov.uk should be supporting that 0.25% of users, seems like it's probably a waste of resources. Can't you just settle for graceful degradation? Is there some DDA angle (supporting screenreaders) or other mitigation that's not obvious?
        10y ago
matt4077 10y ago
We're also on the cusp of CSS grids being available in all major browsers, and – considering people have started upgrading much faster – it should be supported for >95% of users within the next year.
oliwarner 10y ago
You don't float anything? The linked article uses an image floated left, with text wrapping around it. Curious to know how you'd [sanely] accomplish the same result in flexbox? Floats aren't just for structural layout. Even with 100% browser support for Flexbox, I'll still be floating some things.
- masklinn 10y ago
  > Floats aren't just for structural layout. In fact floats aren't for structural layout at all, they were used for it because there were no structural layout tools available at the time.

I've moved away from float entirely and mastered the Flexbox. Which has made my live easier.

by neals 10y ago

I've moved away from float entirely and mastered the Flexbox. Which has made my live easier.

Floats remain useful for their original purpose: floating an inset piece of content inside a wider textual context e.g. an illustration picture or a pull quote. And for that you might still need a clearfix-type workaround.

davnicwil 10y ago

Yes, and further to this - genuine question - Why would you use float-based layouts over flexbox for reasons other than backwards compatibility? About the only reason I can think of off the top of my head is that you / your team already fully grok floats, they are sufficiently powerful for your use case, and you don't want to invest the time to learn flexbox to achieve the same outcome as you could already achieve.

andrei_says_ 10y ago
Susy grid system is currently float-based and the most efficient way I'm aware of to create semantic CSS layouts with wide compatibility. http://susy.oddbird.net/ http://susy.oddbird.net/

Bahamut 10y ago

In this case, flexbox actually is a bit awkward - one is often forced to pair flexbox with calc in this sort of situation. If the content, including text, is too long, it pushes the right container down a level unless the width is fixed to an appropriate size - this is doable with calc (for fluid layout) if one has control over the size of the left container, but otherwise it may be difficult to obtain the desired UI with flexbox.

devwastaken 10y ago

I really like flexbox, but its still missing functionality and somewhat misleading in its options. Everything is row-column based, but you can select between row or column, but in the column option, only justify-content will position content vertically. If you want something like forcing an element to be in the middle vertically, and have an element above it, you can't do that. align-self only works on rows. I really don't understand why they didn't make it work vertically if you have column mode.

mark242 10y ago
A flexbox "column" can also be a row. You can have a container item centered vertically and also have it include two items.
- devwastaken 10y ago
  In this case, I needed two children elements, one would be centered vertically in the column, and the other would be at the top of the column, but they would not effect each others position. I could only make one where the two elements were next to each other, or they effected each others positions, so the centered element was not actually centered. I ended up putting in three elements, the bottom one the same size as the top, but hidden, so the center element would stick between the two.
j_r_f 10y ago
It's all about the nested flex'd elements.
- devwastaken 10y ago
  Do you have an example that would accomplish that? As in, one element centered vertically to the parent flexbox, and its sibling attached to the top of the column, but not effecting each others position?

Xcelerate 10y ago

Is there any reason to not use flexboxes nowadays? I've still been using floats, inline-block, etc. so my websites are compatible with older browsers, but I would rather just switch to using all of the new CSS properties.

noxToken 10y ago
There are a couple of bugs with IE and older versions of the stock (deprecated) Android browser using flexbox, but I think they're all handled easily enough. Also, they don't work with IE9 - God forbid you're still supporting that browser.
- robin_reala 10y ago
  Still supporting IE8, and testing components in IE7. 150k visits last month from IE7, sigh.
  - ryanSrich 10y ago
    150k? That's insane. What's the location for those visits? I'm kind of intrigued.
    - robin_reala 10y ago
      Well, that’s out of ~90m visits a month total. This is for GOV.UK, so I suspect most of them are government internal.
      - pbhjpbhj 10y ago
        Do you think Gov.uk should be supporting that 0.25% of users, seems like it's probably a waste of resources. Can't you just settle for graceful degradation? Is there some DDA angle (supporting screenreaders) or other mitigation that's not obvious?
        10y ago

matt4077 10y ago

We're also on the cusp of CSS grids being available in all major browsers, and – considering people have started upgrading much faster – it should be supported for >95% of users within the next year.

oliwarner 10y ago

You don't float anything? The linked article uses an image floated left, with text wrapping around it. Curious to know how you'd [sanely] accomplish the same result in flexbox? Floats aren't just for structural layout. Even with 100% browser support for Flexbox, I'll still be floating some things.

masklinn 10y ago
> Floats aren't just for structural layout. In fact floats aren't for structural layout at all, they were used for it because there were no structural layout tools available at the time.