5 ms·

Solved by flexbox is nice. Regarding flexbox itself: the syntax is confusing. After working on html/css, leaving, using auto-layout (obj-c, ios) and coming bac

Solved by flexbox is nice. Regarding flexbox itself: the syntax is confusing. After working on html/css, leaving, using auto-layout (obj-c, ios) and coming back to trying flexbox, I am scratching my head, who came up with this? row/column - use horizontal/vertical or hor/ver for short. justify-content and align-items mean different things depending on whether you're using row or column - what? why not just have hor-align, ver-align? Suppose you want a box with 3 paragraphs left-aligned, centered on the screen and a footer with 1 paragraph, aligned with the 3 paragraphs above it, how do you do this? Here's my pseudo-code: body ver nowrap, hor-align center. add 2 flex boxes ver nowrap. box 1 height stretch, hor-align left, ver-align center. box 2 height fit-content, hor-align left, ver-align center. add 3 paragraphs to box 1. add 1 paragraph to box 2. In reality, it is: body flex: column nowrap, justify-content: center, or is it align-items? I don't know, let's guess. How do I do box 1 height stretch? Hm... I don't intuitively know because nothing intuitively makes sense with flexbox. The answer turns out to be flex: 1 on box 1 and flex: 0 on box 2. Great syntax. And the pain continues. Btw, if you set the paragraph margin to 1em 1em 1em 1em;, it breaks the horizontal alignment of the paragraphs, making them center-aligned, why? Only God knows. If you set margin: 1px 1px 1px 1px, it works as expected. What?! Flexbox is light years ahead of the retardation that is floats and clears and the rest of it but it is a FAR cry from auto-layout. Let me set the height of an element... in relation to another element... ANY element... Why am I doing flex: 2, flex: 1 but that only works for sibling elements? What if I want box 1 width to be 20% of the height of box 2 that's elsewhere on the page? How do I do that in flexbox? Even if there is a way, the fact that I don't know and I've spent 2 days figuring it out says it all.

Bahamut 11y ago
I disagree with row/column vs. hor/ver - the web mostly operates on thinking in terms of rows and columns. Otherwise, I do agree there is some confusion with the flexbox syntax and understanding it. I have found http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/ immensely useful.
- dlubarov 11y ago
  True, but to me it wasn't obvious whether "flex-direction: row" meant horizontal (because a row expands horizontally as you add columns) or vertical (because a table expands vertically as you add rows).
- alexashka 11y ago
  I didn't find it helpful - confusing, yes. I found the spec better, which I thought there'd never come a day I'd say but yes - the flexbox spec is the best resource for understanding flexbox. Wow. I know. I think I'm just ranting on the html layout rules in general, for instance: https://css-tricks.com/almanac/properties/m/margin/ https://css-tricks.com/almanac/properties/m/margin/ This points out like 3 things that make NO SENSE. To center something horizontally, you use margin: auto; What? Margins are for having space between elements, not for centering anything. But ok let's say it is for centering, which makes no sense, then you should be able to set the vertical margins to auto. Wait, you can't do that. WHAT!?! It goes on to say if you have 2 paragraphs with top and bottom margins, that doesn't mean you have 2 paragraphs with top and bottom margins some of the time. Because 2 paragraphs, the top/bottom margins of the 2 paragraphs will collapse. WHAT?!?!?!?! Yeah, flexbox is just another abysmal attempt, in the right direction mind you. I don't know who runs the show but I'd say a 3rd year comp-sci student in one year, can come up with a better layout engine (how it works, not performance, by copying auto-layout for instance) than what is currently in existence.
  - pcwalton 11y ago
    You can do vertical centering with margin:auto. Just absolutely position. And margin collapse was a bad idea, I agree. But HTML had it, before CSS. If anyone is to blame for margin collapse, it's NCSA Mosaic. CSS just needed to describe what already existed.
  - evolve2k 11y ago
    > The flexbox spec is the best resource for understanding flexbox. Link to the Flexbox spec for anyone interested: http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-flexbox/
pcwalton 11y ago
The fact that justify-content and align-items changes based on horizontal or vertical is useful for many reasons: toolbars that can become vertical or horizontal per user customization, or vertical writing-direction, for example.
- alexashka 11y ago
  I'm saying the syntax is terrible. The functionality is limited. Why is one 'content' and another 'items'? If you want horizontal and vertical alignment to switch places when you change directions, then you can have a flag that does that for you. For example I have X | X | X - a horizontal layout. I want it left-aligned horizontally and top-aligned vertically. (Top-left corner) and I make it work with the current flexbox stupid syntax. Now if we switch that to vertical layout X - X - X Now where is it gonna be with the current flexbox layout and using content-whatever align-items? I don't really know off the top of my head, because it doesn't make intuitive sense! With horizontal/vertical I know it's in the top left corner. With flex-start, justify-content and align-items I don't know what the heck.
  - sondr3 11y ago
    It makes sense after you've worked with it for a little bit, I had the same confusion when I first started using it but after a while it started making sense and by now I absolutely cannot see myself go back to anything else, it's just so pleasant to write in.
    - alexashka 11y ago
      I agree, when you're forced to eat at McDonalds, choose the shitty salad. Have you worked with auto-layout in xcode? If you did that and used flexbox and chose flexbox, I'd be flabbergasted. Given the choice between blocks, inline-blocks, floats and flexbox - I'm choosing flexbox 100% of the time. Doesn't mean it's not painful however, just that the other options are insane.
      - pcwalton 11y ago
Cushman 11y ago
Would it be overly pedantic to point out that the syntax is CSS syntax? You seem to have an issue with vocabulary and semantics, not syntax.
- alexashka 11y ago
  Good point, thank you :)
krick 11y ago
Exactly. Damn thing applies to a whole CSS, but you would think that in the year 2015, when all that "web was flawed at embryonic stage of development, but it's kinda hard to fix it, when you noticed 20 years later, when it's grown into a huge monster" thing became sort of legendary, they would be more thoughtful of designing APIs. But it seems that w3c has something in common with war: it never changes.
Conlectus 11y ago
I'd argue that creating an element that has size dependant on the size of something somewhere completely different is not something you should be doing anyway. As others have mentioned, being able to switch the orientation of the principle axis is very helpful, for example when going from a row to a column on mobile. Because all positioning is defined based on the principle axis, all the styles translate correctly, and you don't have to override 4+ different rules. > How do I box 1 height stretch? Hm... I don't intuitive know. If you understand how align-items aligns everything else along the secondary axis, then "align-self: stretch" seems pretty intuitive (http://codepen.io/conlectus/pen/WvGLvy http://codepen.io/conlectus/pen/WvGLvy). > re: 1em margin breaking alignment I'm not sure what you're referencing here, as it seems to not do that http://codepen.io/conlectus/pen/WvGLrK http://codepen.io/conlectus/pen/WvGLrK A guess would be that you don't have box-sizing: border-box on all elements set. Adding "flex" always makes the element take up as much space as it can, and the number specifies how much "force" it applies compared to other elements.
- lisper 11y ago
  Minor nit: You mean "principal axis", not "principle axis". Principle is a noun, not an adjective.
woah 11y ago
What is horizontal and vertical? Why should they be absolutely defined?

Bahamut 11y ago

I disagree with row/column vs. hor/ver - the web mostly operates on thinking in terms of rows and columns. Otherwise, I do agree there is some confusion with the flexbox syntax and understanding it. I have found http://css-tricks.com/snippets/css/a-guide-to-flexbox/ http://css-tricks.com/snippets/css/a-guide-to-flexbox/ immensely useful.

dlubarov 11y ago
True, but to me it wasn't obvious whether "flex-direction: row" meant horizontal (because a row expands horizontally as you add columns) or vertical (because a table expands vertically as you add rows).
alexashka 11y ago
I didn't find it helpful - confusing, yes. I found the spec better, which I thought there'd never come a day I'd say but yes - the flexbox spec is the best resource for understanding flexbox. Wow. I know. I think I'm just ranting on the html layout rules in general, for instance: https://css-tricks.com/almanac/properties/m/margin/ https://css-tricks.com/almanac/properties/m/margin/ This points out like 3 things that make NO SENSE. To center something horizontally, you use margin: auto; What? Margins are for having space between elements, not for centering anything. But ok let's say it is for centering, which makes no sense, then you should be able to set the vertical margins to auto. Wait, you can't do that. WHAT!?! It goes on to say if you have 2 paragraphs with top and bottom margins, that doesn't mean you have 2 paragraphs with top and bottom margins some of the time. Because 2 paragraphs, the top/bottom margins of the 2 paragraphs will collapse. WHAT?!?!?!?! Yeah, flexbox is just another abysmal attempt, in the right direction mind you. I don't know who runs the show but I'd say a 3rd year comp-sci student in one year, can come up with a better layout engine (how it works, not performance, by copying auto-layout for instance) than what is currently in existence.
- pcwalton 11y ago
  You can do vertical centering with margin:auto. Just absolutely position. And margin collapse was a bad idea, I agree. But HTML had it, before CSS. If anyone is to blame for margin collapse, it's NCSA Mosaic. CSS just needed to describe what already existed.
- evolve2k 11y ago
  > The flexbox spec is the best resource for understanding flexbox. Link to the Flexbox spec for anyone interested: http://www.w3.org/TR/css3-flexbox/ http://www.w3.org/TR/css3-flexbox/

pcwalton 11y ago

The fact that justify-content and align-items changes based on horizontal or vertical is useful for many reasons: toolbars that can become vertical or horizontal per user customization, or vertical writing-direction, for example.

alexashka 11y ago
I'm saying the syntax is terrible. The functionality is limited. Why is one 'content' and another 'items'? If you want horizontal and vertical alignment to switch places when you change directions, then you can have a flag that does that for you. For example I have X | X | X - a horizontal layout. I want it left-aligned horizontally and top-aligned vertically. (Top-left corner) and I make it work with the current flexbox stupid syntax. Now if we switch that to vertical layout X - X - X Now where is it gonna be with the current flexbox layout and using content-whatever align-items? I don't really know off the top of my head, because it doesn't make intuitive sense! With horizontal/vertical I know it's in the top left corner. With flex-start, justify-content and align-items I don't know what the heck.
- sondr3 11y ago
  It makes sense after you've worked with it for a little bit, I had the same confusion when I first started using it but after a while it started making sense and by now I absolutely cannot see myself go back to anything else, it's just so pleasant to write in.
  - alexashka 11y ago
    I agree, when you're forced to eat at McDonalds, choose the shitty salad. Have you worked with auto-layout in xcode? If you did that and used flexbox and chose flexbox, I'd be flabbergasted. Given the choice between blocks, inline-blocks, floats and flexbox - I'm choosing flexbox 100% of the time. Doesn't mean it's not painful however, just that the other options are insane.
    - pcwalton 11y ago

Cushman 11y ago

Would it be overly pedantic to point out that the syntax is CSS syntax? You seem to have an issue with vocabulary and semantics, not syntax.

alexashka 11y ago
Good point, thank you :)

krick 11y ago

Exactly. Damn thing applies to a whole CSS, but you would think that in the year 2015, when all that "web was flawed at embryonic stage of development, but it's kinda hard to fix it, when you noticed 20 years later, when it's grown into a huge monster" thing became sort of legendary, they would be more thoughtful of designing APIs. But it seems that w3c has something in common with war: it never changes.

Conlectus 11y ago

I'd argue that creating an element that has size dependant on the size of something somewhere completely different is not something you should be doing anyway. As others have mentioned, being able to switch the orientation of the principle axis is very helpful, for example when going from a row to a column on mobile. Because all positioning is defined based on the principle axis, all the styles translate correctly, and you don't have to override 4+ different rules. > How do I box 1 height stretch? Hm... I don't intuitive know. If you understand how align-items aligns everything else along the secondary axis, then "align-self: stretch" seems pretty intuitive (http://codepen.io/conlectus/pen/WvGLvy http://codepen.io/conlectus/pen/WvGLvy). > re: 1em margin breaking alignment I'm not sure what you're referencing here, as it seems to not do that http://codepen.io/conlectus/pen/WvGLrK http://codepen.io/conlectus/pen/WvGLrK A guess would be that you don't have box-sizing: border-box on all elements set. Adding "flex" always makes the element take up as much space as it can, and the number specifies how much "force" it applies compared to other elements.

lisper 11y ago
Minor nit: You mean "principal axis", not "principle axis". Principle is a noun, not an adjective.

woah 11y ago

What is horizontal and vertical? Why should they be absolutely defined?