Layout
container
container-name
container-type
Alignment
As far as I undertand it, flex and grid are bandaids for these not being implemented in the default display: block yet. These are very confusing because they work differently not only in different display settings, but also if flex is set to row or column.
- justify-content
- align-content
- justify-self
- align-self
- justify-items
- align-items
Flex
Grid
padding vs margin
https://www.youtube.com/watch?v=EhbZGV2dqZ4
margin
https://www.youtube.com/watch?v=Azfj1efPAH0
Centering
horizontally, justify-*
justify-content
justify-self
vertically, align-*
align-* works differently in flex and grid
align-content
align-self
position
Using z-index
Only works on positioned elements (ie those without the default position: static setting).
By default, element boxes are rendered on Layer 0.
position
Stacking context
static
Default: The top, right, bottom, left, and z-index properties have no effect.
Space is created for the element in the page layout.
relative
Base position same as static, but offset by top, right, bottom, left, and z-index.
box-sizing
grid
Box alignment in grid layout
Aligning items
align-items
This does vertical aligning. Used in the container to set all children.
Default is stretch.
align-self
Overides align-items for a given grid child.
- [start] ie top
- [end] ie bottom
- [center]
- [stretch] default
align-content
justify-items
Default is stretch.
justify-self
justify-content
place-items
Shorthand for align-items and justify-items combined.
place-self
place-content
Grid
For games this is probably the right choice to fix things in rows and columns.
flex
Flex
Flex is a newish option for the CSS display property, and simplifies responsive design by replacing lots of historical cruft.
Something that led me down a blind ally was to mix flex with grid by splitting CSS stylesheets into breakpoints, but simply focusing on flex and treating all the legacy CSS stuff as deprecated made responsive design much easier.
In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions. — Specification