Šířka
Karta je široká jako celá stránka, takže na velké obrazovce má její text velmi dlouhé řádky. Šířku nastavují třídy w-* (z anglického width) a jejich čísla jsou kroky na stejné škále mezer: w-64 je 64 kroků po 0.25rem, tedy 16rem neboli 256 pixelů. Kromě čísel jsou tu i třídy pro šířky, které závisí na rodiči nebo na okně:
| Třída | CSS | Šířka |
|---|---|---|
w-12 | width: 3rem; | 48 px |
w-64 | width: 16rem; | 256 px |
w-96 | width: 24rem; | 384 px |
w-1/2 | width: 50%; | polovina rodiče |
w-full | width: 100%; | celý rodič |
w-screen | width: 100vw; | celé okno |
w-auto | width: auto; | výchozí šířka |
Zlomky jako w-1/2, w-1/3, w-2/3 nebo w-3/4 jsou podílem šířky rodiče, stejně jako procenta v kurzu CSS. w-full udělá prvek stejně široký, jako je obsah jeho rodiče, w-screen stejně široký jako okno prohlížeče a w-auto vrátí výchozí šířku, kterou si prohlížeč určí sám.
Tlačítko je řádkový blok (inline-block), jak víte z kurzu CSS: je jen tak široké jako jeho obsah, ale šířku mu nastavit můžete. Tlačítka přes celou šířku karty jsou běžná hlavně na telefonech: snadno se do nich trefíte prstem.
Jak psát:
Pokyny
Kartě přidejte třídu w-96. Bude široká 384 pixelů. Teď v liště Šířka náhledu nad náhledem klikněte na 375 px. Stránka se zobrazí v šířce obrazovky telefonu a uvidíte, že se na ni karta nevejde a přečnívá (spravíme to v dalším cvičení). Pak náhled vraťte tlačítkem Podle okna.
Tlačítku přidejte třídu w-full. Bude stejně široké jako obsah karty.
Začněte programovat zdarma
4/9