Tools · CSS · Flexbox-Spielwiese · Anleitungen
Anleitungen für Flexbox-Spielwiese
Drei kurze Beiträge: warum es wichtig ist, wie es geht, und ein konkreter Anwendungsfall.
Why Flex Items Never End Up the Width You Gave Them
In flexbox, a width is a starting point, not a promise. flex-basis sets where each item begins, then grow and shrink hand out or take back whatever space is left on the line. Once you see that, most surprises stop being surprises.
Anleitung lesenHow to Make One Flex Item Fill the Remaining Space
A fixed-width sidebar next to a column that takes everything else is two flex properties. Getting it to stay fixed when the window narrows, and stopping long content from breaking it, takes two more. Here is the whole set, built live.
Anleitung lesenA Flexbox Header Row That Survives Longer Words
Logo on one side, links in the middle, a button on the other: space-between does it in one line. Then the page is translated, the words get longer, and the row overflows. This is how this site's own header handles it.
Anleitung lesen