6 ms·

"flexbox horrors": "flex-basis" - defines mysterious "main width" (WTF is wrong with just width?) "flex-grow" and "flex-shrink" - grow and shrink relative to

"flexbox horrors": "flex-basis" - defines mysterious "main width" (WTF is wrong with just width?) "flex-grow" and "flex-shrink" - grow and shrink relative to what? How to define flexible margins? Like I want left margin to be twice larger than right one and all this to be flexible: |---m:2*-------|--1*---|--m:1*-| ? Effectively flexbox breaks CSS box model that postulates only width/height to define box dimensions. Why I cannot say just this: { width: 1fr; margin-left: 2fr; margin-right: 1fr; } ? Where 'fr' are flex units introduced in CSS Grid https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value Why two specifications define the same entity (flex weight) by two different mechanisms - by property and by unit? CSS looks like Christmas tree where each passer-by (Google and Microsoft here) adds its own shiny stuff ... Is this what we name as modularity of CSS?

sillysaurus3 9y ago
Just use Bulma. You can drop it into any project. https://bulma.io/documentation/columns/sizes/ https://bulma.io/documentation/columns/sizes/ Your example can be accomplished like this: <div class="columns"> <div class="column is-half">m:2*</div> <div class="column">1*</div> <div class="column">m:*1</div> </div> There's a good reason to limit yourself to 12 columns: the layout is consistent across all common screen sizes, whether it's tiny mobile screens or huge desktop screens. If you have sizes like 1.374fr, you lose a lot of that automatic layout functionality.
- c-smile 9y ago
  Bulma, as any other grid systems based on % units, is quite limited in real life. Check this: https://sciter.com/images/wt-langs.png https://sciter.com/images/wt-langs.png You see the same HTML markup there but in different languages. Text in most of European languages is longer. This is HTML/CSS Sciter UI that uses flex units and flow property: https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm
  - sillysaurus3 9y ago
    Hmm, why is it limited? I'm interested in hearing your experiences.
    - c-smile 9y ago
      Check screenshots above. There is a block having 4-columns layout. Each column there a) is flexible and b) uses min-content constraint. So widths of columns are unknown upfront - determined by actual content in grid cells. That last part (use of actual content) is what you cannot reproduce using % units in principle.
- baby 9y ago
  Are you the laracast guy?
  - sillysaurus3 9y ago
    Nope. But amusingly, you do know me. Shoot me an email if you want to know more. Hope you've been well. Your 4chan board was hilariously cool.
    - e12e 9y ago
      (still) OT: now you two have made me curious about your story...
- SippinLean 9y ago
  That doesn't solve the problem the parent was describing. It just removes flex and sets 50% width on the half-column.
krsdcbl 9y ago
Flexbox works kinda like this as far as i know: Your items get distributed along the main axis, using their flex-basis. When all elements are layed out, flexbox will evaluate how much space is left, or how much overlap there is. This total remaining space will be distributed among all flex items proportionally to their flex-grow value. A flex-grow value of 2 means "grow twice as much as your siblings if there's spare room" (0 will prevent an element from growing at all, even if there is space left). So if 3 elements with flex-grow 1--1--2 and 100px basis each where to fill a 400px box, the remaining 100px would be distributed 25--25--50. Flex-shrink works the other way round. The same 400px-box example with flex-basis 200px and shrink 1--1--2 would result in 150--150--100px wide elements.
- c-smile 9y ago
  "Flexbox works kinda like this as far as i know:" That's the thing - nobody knows exactly how it works. Except few developers who actually tried to implement the spec. Nobody knows why do we need separate flex-shrink and flex-grow. Nobody knows why these are properties and not units so they can be used not just for width/height but for padding, margin, border-width, top/left/bottom/right, size, etc. Nobody knows why 'flex' is a value of 'display' property and not of some other property orthogonal to display like 'flow' or 'layout'. So we can write something like this: td.some { display:table-cell; flow: horizontal; // a.k.a. flex/row } At the moment there is no way to define flexible content flow inside table-cell's and list-item's as display:flex is mutually exclusive with display:table-cell. Really, flexbox is the worst CSS module ever published and accepted by W3C.
  - Doxin 9y ago
    > nobody knows exactly how it works. That's either plain nonsense or trivially true of all css, depending on your definitions. Flexbox really isn't all that confusing or hard, and it does more than table layouts ever did. Separate flex-grow and flex-shrink are needed for the same reason there's a min-width and a max-width property. flex-shrink defines if the element is allowed to shrink, and how much it does when needed. flex-grow defines if the element is allowed to grow, and how much when needed. The reason they are unitless values is because they are used to calculate ratios. I agree that there have been some dubious design decisions, but if you really need to do a table cell with a flex-flowing content you can always stick a wrapper div in the cell.
Nition 9y ago
Man, you could almost have done this back in pre-CSS days with tables, if you didn't mind setting the total width of the whole thing including margins instead of just the inner width. <table style="width:75%"> // Total width of all three <tr> <th width="50%">LeftMargin</th> <th width="25%">Main</th> <th width="25%">RightMargin</th> </tr> </table> How far have we really come?
- c-smile 9y ago
  Exactly. 10 years we were told how dangerous are tables. In the same 10 years (http://www.w3.org/TR/css-flexbox-1/ http://www.w3.org/TR/css-flexbox-1/) we were trying to come up with something that can be used instead. And have got that ugly flexbox. And still... were are my col/rowspans? Something is terribly wrong with the process.
  - gjjrfcbugxbhf 9y ago
    Well the table based layout does not work on mobile. The float, flex or grid based layouts do. So we've come somewhere but there is further to go and maybe we didn't need to go in so many circles.
    - Nition 9y ago
      What's broken with table layouts on mobile? I just tested my code above on Safari on iOS 10 and it displayed as expected. Here's the live HTML I uploaded for testing: http://momentstudio.co.nz/temp/test.html http://momentstudio.co.nz/temp/test.html This page we're on now also runs mostly on tables.
      - losvedir 9y ago
        > What's broken with table layouts on mobile? I just tested my code above on Safari on iOS 10 and it displayed as expected. Depends what you'd expect, I suppose. These days, I'd expect the columns to switch to a vertical stacking layout when viewed at a mobile width. I guess maybe it's not "broken", per se, but it's not responsive and certainly pretty limited in how it can be used.
dangerlibrary 9y ago
In the face of ambiguity, guess. There should be N-- and preferably only N --obvious ways to do it.
- c-smile 9y ago
  "obvious" is key point here. This { width:100px; margin-left:1fr } has clear and obvious physical meaning: solid block with the spring of strength 1 on the left of it. So the block is attached to the right side of its container. And so you don't need all those aligns - flex units can do alignment in more flexible ways. That's obvious indeed. But those flex-shrink/grow ...
joshribakoff 9y ago
Your margin scenario is exactly what css grid handles nicely (grid gutters)
- c-smile 9y ago
  Yes but flex units can be used not just in grid context. Consider this: <p>Foo <input style="width:1fr /> bar.</p> That <input> will span free space left in the p element from "Foo " and " bar."
Mystrl 9y ago
Do you mean something like https://jsfiddle.net/Mystrl/9uj40kam/1/ https://jsfiddle.net/Mystrl/9uj40kam/1/
- c-smile 9y ago
  Close but without those artificial DOM elements. Here is an illustration of the idea of flex units: https://sciter.com/docs/flex-flow/images/flex-springs.png https://sciter.com/docs/flex-flow/images/flex-springs.png

sillysaurus3 9y ago

Just use Bulma. You can drop it into any project. https://bulma.io/documentation/columns/sizes/ https://bulma.io/documentation/columns/sizes/ Your example can be accomplished like this: <div class="columns"> <div class="column is-half">m:2*</div> <div class="column">1*</div> <div class="column">m:*1</div> </div> There's a good reason to limit yourself to 12 columns: the layout is consistent across all common screen sizes, whether it's tiny mobile screens or huge desktop screens. If you have sizes like 1.374fr, you lose a lot of that automatic layout functionality.

c-smile 9y ago
Bulma, as any other grid systems based on % units, is quite limited in real life. Check this: https://sciter.com/images/wt-langs.png https://sciter.com/images/wt-langs.png You see the same HTML markup there but in different languages. Text in most of European languages is longer. This is HTML/CSS Sciter UI that uses flex units and flow property: https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm
- sillysaurus3 9y ago
  Hmm, why is it limited? I'm interested in hearing your experiences.
  - c-smile 9y ago
    Check screenshots above. There is a block having 4-columns layout. Each column there a) is flexible and b) uses min-content constraint. So widths of columns are unknown upfront - determined by actual content in grid cells. That last part (use of actual content) is what you cannot reproduce using % units in principle.
baby 9y ago
Are you the laracast guy?
- sillysaurus3 9y ago
  Nope. But amusingly, you do know me. Shoot me an email if you want to know more. Hope you've been well. Your 4chan board was hilariously cool.
  - e12e 9y ago
    (still) OT: now you two have made me curious about your story...
SippinLean 9y ago
That doesn't solve the problem the parent was describing. It just removes flex and sets 50% width on the half-column.

krsdcbl 9y ago

Flexbox works kinda like this as far as i know: Your items get distributed along the main axis, using their flex-basis. When all elements are layed out, flexbox will evaluate how much space is left, or how much overlap there is. This total remaining space will be distributed among all flex items proportionally to their flex-grow value. A flex-grow value of 2 means "grow twice as much as your siblings if there's spare room" (0 will prevent an element from growing at all, even if there is space left). So if 3 elements with flex-grow 1--1--2 and 100px basis each where to fill a 400px box, the remaining 100px would be distributed 25--25--50. Flex-shrink works the other way round. The same 400px-box example with flex-basis 200px and shrink 1--1--2 would result in 150--150--100px wide elements.

c-smile 9y ago
"Flexbox works kinda like this as far as i know:" That's the thing - nobody knows exactly how it works. Except few developers who actually tried to implement the spec. Nobody knows why do we need separate flex-shrink and flex-grow. Nobody knows why these are properties and not units so they can be used not just for width/height but for padding, margin, border-width, top/left/bottom/right, size, etc. Nobody knows why 'flex' is a value of 'display' property and not of some other property orthogonal to display like 'flow' or 'layout'. So we can write something like this: td.some { display:table-cell; flow: horizontal; // a.k.a. flex/row } At the moment there is no way to define flexible content flow inside table-cell's and list-item's as display:flex is mutually exclusive with display:table-cell. Really, flexbox is the worst CSS module ever published and accepted by W3C.
- Doxin 9y ago
  > nobody knows exactly how it works. That's either plain nonsense or trivially true of all css, depending on your definitions. Flexbox really isn't all that confusing or hard, and it does more than table layouts ever did. Separate flex-grow and flex-shrink are needed for the same reason there's a min-width and a max-width property. flex-shrink defines if the element is allowed to shrink, and how much it does when needed. flex-grow defines if the element is allowed to grow, and how much when needed. The reason they are unitless values is because they are used to calculate ratios. I agree that there have been some dubious design decisions, but if you really need to do a table cell with a flex-flowing content you can always stick a wrapper div in the cell.

Nition 9y ago

Man, you could almost have done this back in pre-CSS days with tables, if you didn't mind setting the total width of the whole thing including margins instead of just the inner width. <table style="width:75%"> // Total width of all three <tr> <th width="50%">LeftMargin</th> <th width="25%">Main</th> <th width="25%">RightMargin</th> </tr> </table> How far have we really come?

c-smile 9y ago
Exactly. 10 years we were told how dangerous are tables. In the same 10 years (http://www.w3.org/TR/css-flexbox-1/ http://www.w3.org/TR/css-flexbox-1/) we were trying to come up with something that can be used instead. And have got that ugly flexbox. And still... were are my col/rowspans? Something is terribly wrong with the process.
- gjjrfcbugxbhf 9y ago
  Well the table based layout does not work on mobile. The float, flex or grid based layouts do. So we've come somewhere but there is further to go and maybe we didn't need to go in so many circles.
  - Nition 9y ago
    What's broken with table layouts on mobile? I just tested my code above on Safari on iOS 10 and it displayed as expected. Here's the live HTML I uploaded for testing: http://momentstudio.co.nz/temp/test.html http://momentstudio.co.nz/temp/test.html This page we're on now also runs mostly on tables.
    - losvedir 9y ago
      > What's broken with table layouts on mobile? I just tested my code above on Safari on iOS 10 and it displayed as expected. Depends what you'd expect, I suppose. These days, I'd expect the columns to switch to a vertical stacking layout when viewed at a mobile width. I guess maybe it's not "broken", per se, but it's not responsive and certainly pretty limited in how it can be used.

dangerlibrary 9y ago

In the face of ambiguity, guess. There should be N-- and preferably only N --obvious ways to do it.

c-smile 9y ago
"obvious" is key point here. This { width:100px; margin-left:1fr } has clear and obvious physical meaning: solid block with the spring of strength 1 on the left of it. So the block is attached to the right side of its container. And so you don't need all those aligns - flex units can do alignment in more flexible ways. That's obvious indeed. But those flex-shrink/grow ...

joshribakoff 9y ago

Your margin scenario is exactly what css grid handles nicely (grid gutters)

c-smile 9y ago
Yes but flex units can be used not just in grid context. Consider this: <p>Foo <input style="width:1fr /> bar.</p> That <input> will span free space left in the p element from "Foo " and " bar."

Mystrl 9y ago

Do you mean something like https://jsfiddle.net/Mystrl/9uj40kam/1/ https://jsfiddle.net/Mystrl/9uj40kam/1/

c-smile 9y ago
Close but without those artificial DOM elements. Here is an illustration of the idea of flex units: https://sciter.com/docs/flex-flow/images/flex-springs.png https://sciter.com/docs/flex-flow/images/flex-springs.png