CSS layout

how to make layouts with css

This page is really unfinished just so you know

float

This basically aligns the element with a side (right or left) of its container, and makes text of the container flow around it. The wikipedia infobox uses it for example.

Usage:

.elt {
    float: right;
}

@media rules

This is like a way to enable a bunch of selectors if some condition is true, such as the user prefers dark mode or their screen is over this resolution etc

tables

Don't

flex

Ok, this is complicated and i dont know it that well (best source is flexbox froggy but ill try to condense what i can remember).

Its a way to tell a container how to layout items along an axis/direction (horizontal by default)

properties

diplay: flex;

enables flex mode on the element

justify-content: <value>;

TODO: finish this lol. Its gonna be some work since i forgot everything :skull: if only i had made a resource documenting it hmmmmmmmmm