9 ms·

Quick question: this refers heavily to Flexbox, which as someone who has only a tangental interest in CSS, I don't know much about. Is it the standard way of do

Quick question: this refers heavily to Flexbox, which as someone who has only a tangental interest in CSS, I don't know much about. Is it the standard way of doing positioning now? Care to explain it like I'm 5?

matthewhall 10y ago
All of the other positioning systems are still completely valid, it's just that some people (myself included) find it easier to center things horizontal + vertical and distribute items on the page.
shakna 10y ago
It can be easier than other ways of positioning in CSS, but you may need to be careful on relying on it, depending on your target audience, and what browsers they use. [0] [0] http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox
- jrapdx3 10y ago
  I think you're right on both counts. After getting the hang of it, flexbox is pretty straightforward to use, IMO less confusing and touchy than floats, especially for responsive layouts. Most browsers are OK these days, but IE/Edge is where I've encountered the most problems with compatability. There are ways to work around it, but that takes a bit of additional effort. CSS tools, e.g., Autoprefix are useful.
  - shakna 10y ago
    Absolutely, flexbox is great. My comment with browsers, is more about knowing your audience. Most of the evergreen browsers do support flexbox but... Well, I maintain a website for a company. 97.3% of visitors, are return visitors. 69.77% of the visitors are using a version of Internet Explorer. 69.03% of the visitors are using Internet Explorer 7.0. I have no hope of getting to use flexbox to simplify managing the website, which makes me very sad.
    - majewsky 10y ago
      I would try communicating to my manager that maintaining IE 7 support is costly for you. When you work on some IE-7-specific issue, log your time, and show them an actual rundown. Maybe that will tilt the cost-benefit analysis far enough to push them into upgrading their default browser. (By the way, I'm sympathetic with you. When I deployed a big feature in an intranet web application in 2012, it broke for dozens of users, and it took me days to track down the misplaced comma that broke the neck of the IE 7 JS parser.)
      - shakna 10y ago
        More than 69% of our regular users are on IE7, we just can't afford to drop that. (They do in fact get a pop up telling them to upgrade, but that had no noticeable affect on traffic).
        91bananas 10y ago
        What country are you in? That is an alarming rate of ie7 traffic
        shakna 10y ago
        Not sure country counts at all when looking at this stuff, because individual sites very rarely reflect national trends. However, that particular site is Australian, where Chrome makes up ~50% of traffic.
        majewsky 10y ago
        He said it's an internal application IIRC, so someone in the company is responsible for that.
werdnapk 10y ago
Only the first few properties are flexbox related (alphabetical order). Keep scrolling through the property list and you'll find the non-flexbox properties.
chrisfosterelli 10y ago
Flexbox is really worth trying. It is a much more natural way to layout responsive components imo, and is great for layout design in particular. However, that said, the majority of components I build are still not in flexbox. It's a useful tool in the toolset, but not sure I'd call it the new default yet.
pault 10y ago
Flexbox is conceptually more difficult than older float & grid based layout systems (it takes some time to wrap your head around the relationship between `display: flex` containers and the various flex-* properties that child elements utilize), but it makes certain things dead simple that were nearly impossible before. For example, vertically centering content (almost comically difficult before flexbox) and fixed-width elements mixed with expanding elements that will share unused space in a row. In a lot of ways flexbox acts like old-school table layouts--which were easy to use and predictable--but without the ugly, non-semantic, and verbose markup. Best of both worlds really. They are supported in all self-updating browsers, so unless you have to support IE<=10 they are safe to use and extremely convenient. Replacing a classic grid-based layout with flexbox saves an astonishing amount of markup. I've been using it exclusively for the last six months or so. I found this CSSTricks article helpful when I was building my first flexbox layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- Drdrdrq 10y ago
  +1 for linking to Complete Guide to Flexbox. This guide is really great!
- wapz 10y ago
  Thanks for the info. I did some simple CSS/HTML work a long time ago and never heard of flexbox (and it's everywhere on this page)
- zem 10y ago
  ooh, mixing fixed-width with expanding elements is exactly the thing i'm struggling with now. i'll look into converting from grid to flex based layout and see how that goes.
  - pault 10y ago
    You can also use calc(100% - [fixed container width]px) in a pinch.
- archildress 10y ago

matthewhall 10y ago

All of the other positioning systems are still completely valid, it's just that some people (myself included) find it easier to center things horizontal + vertical and distribute items on the page.

shakna 10y ago

It can be easier than other ways of positioning in CSS, but you may need to be careful on relying on it, depending on your target audience, and what browsers they use. [0] [0] http://caniuse.com/#search=flexbox http://caniuse.com/#search=flexbox

jrapdx3 10y ago
I think you're right on both counts. After getting the hang of it, flexbox is pretty straightforward to use, IMO less confusing and touchy than floats, especially for responsive layouts. Most browsers are OK these days, but IE/Edge is where I've encountered the most problems with compatability. There are ways to work around it, but that takes a bit of additional effort. CSS tools, e.g., Autoprefix are useful.
- shakna 10y ago
  Absolutely, flexbox is great. My comment with browsers, is more about knowing your audience. Most of the evergreen browsers do support flexbox but... Well, I maintain a website for a company. 97.3% of visitors, are return visitors. 69.77% of the visitors are using a version of Internet Explorer. 69.03% of the visitors are using Internet Explorer 7.0. I have no hope of getting to use flexbox to simplify managing the website, which makes me very sad.
  - majewsky 10y ago
    I would try communicating to my manager that maintaining IE 7 support is costly for you. When you work on some IE-7-specific issue, log your time, and show them an actual rundown. Maybe that will tilt the cost-benefit analysis far enough to push them into upgrading their default browser. (By the way, I'm sympathetic with you. When I deployed a big feature in an intranet web application in 2012, it broke for dozens of users, and it took me days to track down the misplaced comma that broke the neck of the IE 7 JS parser.)
    - shakna 10y ago
      More than 69% of our regular users are on IE7, we just can't afford to drop that. (They do in fact get a pop up telling them to upgrade, but that had no noticeable affect on traffic).
      - 91bananas 10y ago
        What country are you in? That is an alarming rate of ie7 traffic
        shakna 10y ago
        Not sure country counts at all when looking at this stuff, because individual sites very rarely reflect national trends. However, that particular site is Australian, where Chrome makes up ~50% of traffic.
      - majewsky 10y ago
        He said it's an internal application IIRC, so someone in the company is responsible for that.

werdnapk 10y ago

Only the first few properties are flexbox related (alphabetical order). Keep scrolling through the property list and you'll find the non-flexbox properties.

chrisfosterelli 10y ago

Flexbox is really worth trying. It is a much more natural way to layout responsive components imo, and is great for layout design in particular. However, that said, the majority of components I build are still not in flexbox. It's a useful tool in the toolset, but not sure I'd call it the new default yet.

pault 10y ago

Flexbox is conceptually more difficult than older float & grid based layout systems (it takes some time to wrap your head around the relationship between `display: flex` containers and the various flex-* properties that child elements utilize), but it makes certain things dead simple that were nearly impossible before. For example, vertically centering content (almost comically difficult before flexbox) and fixed-width elements mixed with expanding elements that will share unused space in a row. In a lot of ways flexbox acts like old-school table layouts--which were easy to use and predictable--but without the ugly, non-semantic, and verbose markup. Best of both worlds really. They are supported in all self-updating browsers, so unless you have to support IE<=10 they are safe to use and extremely convenient. Replacing a classic grid-based layout with flexbox saves an astonishing amount of markup. I've been using it exclusively for the last six months or so. I found this CSSTricks article helpful when I was building my first flexbox layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Drdrdrq 10y ago
+1 for linking to Complete Guide to Flexbox. This guide is really great!
wapz 10y ago
Thanks for the info. I did some simple CSS/HTML work a long time ago and never heard of flexbox (and it's everywhere on this page)
zem 10y ago
ooh, mixing fixed-width with expanding elements is exactly the thing i'm struggling with now. i'll look into converting from grid to flex based layout and see how that goes.
- pault 10y ago
  You can also use calc(100% - [fixed container width]px) in a pinch.
archildress 10y ago