4 ms·

Given the presence of https://github.com/facebook/css-layout https://github.com/facebook/css-layout it will probably flex-based. Not cool as a constraint based

by yuchi 12y ago

Given the presence of https://github.com/facebook/css-layout https://github.com/facebook/css-layout it will probably flex-based. Not cool as a constraint based layout but good enough for easier portability of knowledge.

drcode 12y ago
Can I create the largest possible square div in a rectangular div with this library? That is my standard test as to whether a layout framework is advanced enough to meet my basic needs. (vanilla CSS fails this test of course, even with the most recent extensions, AFAIK)
- yuchi 12y ago
  You can do that with some funny inline-block wizardy on Vanilla CSS by the way. I don’t currently know if flex-box helps here. I think not.
  - carterehsmith 12y ago
    Source? AFAIK if you want your border, padding and margin respected, there is no way to do the above in vanilla CSS. Which is why css-flexbox was proposed.
    - yuchi 12y ago
      Here it is (it’s border-{top, bottom} based, not inline-block) http://www.mademyday.de/css-height-equals-width-with-pure-css.html http://www.mademyday.de/css-height-equals-width-with-pure-cs... The issue is that it’s only width-constrained.
- carterehsmith 12y ago
  With css-flexbox, you probably can. Your DIV should have flex-grow: 1 which will make it take the allowable space along the "main axis" (shared with other flex-growers) and then align-items: stretch, to pick up all available space along the "cross axis". With some nesting, you can do pretty much whatever you want except for the grid layout. Grid layout is another thing coming but barely implemented in the today's browsers. Anyways, flex-box is not available in IE < 10. IE10 requires ms- prefix. If React makes it available everywhere (IE8+) that will be really great.
  - drcode 12y ago
    Thanks, but last I looked into this it wasn't possible for this to work for a square in a parent rectangle of arbitrary dimensions. Can you find an example that works, using jsfiddle or something similar?
- vkjv 12y ago
  Are you excluding hacks? Because you can do this pretty easily in CSS2 since padding is always relative to width. Make your square div { width: 100%; height: 0; padding-bottom: 100% (or whatever ratio you want, doesn't have to be 1:1); };
  - drcode 12y ago
    That only works for one dimension, can't handle square in landscape rect.

by yuchi 12y ago

drcode 12y ago

Can I create the largest possible square div in a rectangular div with this library? That is my standard test as to whether a layout framework is advanced enough to meet my basic needs. (vanilla CSS fails this test of course, even with the most recent extensions, AFAIK)

yuchi 12y ago
You can do that with some funny inline-block wizardy on Vanilla CSS by the way. I don’t currently know if flex-box helps here. I think not.
- carterehsmith 12y ago
  Source? AFAIK if you want your border, padding and margin respected, there is no way to do the above in vanilla CSS. Which is why css-flexbox was proposed.
  - yuchi 12y ago
    Here it is (it’s border-{top, bottom} based, not inline-block) http://www.mademyday.de/css-height-equals-width-with-pure-css.html http://www.mademyday.de/css-height-equals-width-with-pure-cs... The issue is that it’s only width-constrained.
carterehsmith 12y ago
With css-flexbox, you probably can. Your DIV should have flex-grow: 1 which will make it take the allowable space along the "main axis" (shared with other flex-growers) and then align-items: stretch, to pick up all available space along the "cross axis". With some nesting, you can do pretty much whatever you want except for the grid layout. Grid layout is another thing coming but barely implemented in the today's browsers. Anyways, flex-box is not available in IE < 10. IE10 requires ms- prefix. If React makes it available everywhere (IE8+) that will be really great.
- drcode 12y ago
  Thanks, but last I looked into this it wasn't possible for this to work for a square in a parent rectangle of arbitrary dimensions. Can you find an example that works, using jsfiddle or something similar?
vkjv 12y ago
Are you excluding hacks? Because you can do this pretty easily in CSS2 since padding is always relative to width. Make your square div { width: 100%; height: 0; padding-bottom: 100% (or whatever ratio you want, doesn't have to be 1:1); };
- drcode 12y ago
  That only works for one dimension, can't handle square in landscape rect.