5 ms·

Flexbox (or something similar) should have been the first thing to go into CSS spec. Colors, fonts, margins and what-not are way less important than the ability

Flexbox (or something similar) should have been the first thing to go into CSS spec. Colors, fonts, margins and what-not are way less important than the ability to align elements. Alignin things vertically is still brainded, but at least now it's possible. Instead of setting properties for the parent element, we should be able to just say .vertically-and-horizontally-centered {align: center center;} and be done with it.

chii 13y ago
The issue with css is it conflates two very separate concerns - one of styling, and one of layout. Sure, both are presentation related, but they are differently related. CSS used to work well for styling, and is terrible for layout. I hope flexbox is the silver bullet - it seems to be tho, so my fingers are crossed.
- kamjam 13y ago
  Agree. It just should have happened a LONG time ago, these issues have bene present for a very long time and even since the beginning, the hack was to use <tables> for layouts
dools 13y ago
You can solve the vertical alignment problem pretty easily using display:inline-block
- hpaavola 13y ago
  Not easily. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Foo</title> <style> html {height: 100%;} body {height: 100%;} .mid {display: inline-block; vertical-align: middle;} /*body:before {content: ''; height: 100%; display: inline-block; vertical-align: middle;}*/ </style> </head> <body> <div class="mid">vertically aligned</div> </body> </html> would be easily, but you need to uncomment that last rule before it "works", and that is just ugly. And when that last rule is uncommented, viewport now has scrollbar for some reason that I did not have motivation to investigate. Like chii said, that's because CSS is a language for styling, not for layouts.
  - emn13 13y ago
    The extra scrollbar is due to fact that you've set height to 100% but you still have padding on the body tag. Also, unrelatedly, you should remove the space between the body tag and the div tag to avoid font-specific horizontal offsets.
- ratbeard 13y ago
  The problem I've encountered with these kind of solutions are that they're never universally applicable so you have to know a list of solutions and what situations they can be applied. I wish I could remember a inline-block + vertical alignment specific example but two others would be: `margin: 0 auto;` to center horizontally requires knowing the width, and it must be smaller than its parent container. If its not then use: `position: absolute; left: 50%; margin-left: - <width / 2>%`, and make sure parent has a height and position relative. `text-indent: -999em` to hide text (which is admittedly not the best technique) was the cause of our 3d css transform animation running really slow. With dedicated properties to solve these issues you'd hope they could be universally applied and reasoned about.
  - dools 13y ago
    Check out stacklayout.com

chii 13y ago

The issue with css is it conflates two very separate concerns - one of styling, and one of layout. Sure, both are presentation related, but they are differently related. CSS used to work well for styling, and is terrible for layout. I hope flexbox is the silver bullet - it seems to be tho, so my fingers are crossed.

kamjam 13y ago
Agree. It just should have happened a LONG time ago, these issues have bene present for a very long time and even since the beginning, the hack was to use <tables> for layouts

dools 13y ago

You can solve the vertical alignment problem pretty easily using display:inline-block

hpaavola 13y ago
Not easily. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Foo</title> <style> html {height: 100%;} body {height: 100%;} .mid {display: inline-block; vertical-align: middle;} /*body:before {content: ''; height: 100%; display: inline-block; vertical-align: middle;}*/ </style> </head> <body> <div class="mid">vertically aligned</div> </body> </html> would be easily, but you need to uncomment that last rule before it "works", and that is just ugly. And when that last rule is uncommented, viewport now has scrollbar for some reason that I did not have motivation to investigate. Like chii said, that's because CSS is a language for styling, not for layouts.
- emn13 13y ago
  The extra scrollbar is due to fact that you've set height to 100% but you still have padding on the body tag. Also, unrelatedly, you should remove the space between the body tag and the div tag to avoid font-specific horizontal offsets.
ratbeard 13y ago
The problem I've encountered with these kind of solutions are that they're never universally applicable so you have to know a list of solutions and what situations they can be applied. I wish I could remember a inline-block + vertical alignment specific example but two others would be: `margin: 0 auto;` to center horizontally requires knowing the width, and it must be smaller than its parent container. If its not then use: `position: absolute; left: 50%; margin-left: - <width / 2>%`, and make sure parent has a height and position relative. `text-indent: -999em` to hide text (which is admittedly not the best technique) was the cause of our 3d css transform animation running really slow. With dedicated properties to solve these issues you'd hope they could be universally applied and reasoned about.
- dools 13y ago
  Check out stacklayout.com