5 ms·
.thing { display: flex; align-items: center; justify-content: center; } Two of those lines exist to handle each axis separately, the first is to define the lay
by have_faith 6y ago
.thing { display: flex; align-items: center; justify-content: center; }
Two of those lines exist to handle each axis separately, the first is to define the layout mode you are using. It doesn't get much simpler while still maintaining a fine level of control over each aspect of the layout. I don't buy that it has to be "better" than this.
- runawaybottle 6y agoWhich keyword defines the axis in question?
- have_faith 6y agoJustify content and Align items operate on the Main axis and the Cross axis respectively. By default this would be the horizontal and vertical. Because of the flexibility of the layout system you can tell it to distribute the main axis vertically instead (flex-direction: column) which would make the cross access horizontal. There is a consistent logic to this which affords a lot of power when creating layouts.
- runawaybottle 6y agoI’m sorry, this is unacceptable reasoning. We are owed a better API, let’s get the right people on this.
- have_faith 6y agoThe current layout system is designed with language (and content) direction preferences in mind. Could you expand on what you think an ideal layout system would be? I'd be interested to see what an alternative would look like with the same considerations.