Zalamování a roztahování
Do sekce Naše kočky jsme přidali dvě věci. Pod nadpisem je řada štítků, které říkají, co platí pro všechny naše kočky. Pod kartami je oranžový box, kde se návštěvníci mohou přihlásit k odběru novinek e-mailem. Řada štítků i formulář v boxu už jsou flex kontejnery se třídami flex gap-2. Uvidíte je, když v náhledu sjedete dolů.
Podívejte se na štítky: v úzkém náhledu se do jedné řady nevejdou, a tak se zmenšují a jejich text se láme do dvou řádků. Z kurzu CSS víte, že flex kontejner drží všechny položky na jednom řádku. Tyto třídy určují, co se stane, když se položky nevejdou, nebo když naopak zbývá volné místo:
| Třída | CSS | Co dělá |
|---|---|---|
flex-wrap | flex-wrap: wrap; | Položky, které se nevejdou, se přesunou na další řádek. |
flex-nowrap | flex-wrap: nowrap; | Všechny položky zůstanou na jednom řádku (výchozí). |
grow | flex-grow: 1; | Položka se roztáhne do volného místa. |
flex-1 | flex: 1; | Položka roste od počáteční velikosti nula, takže zabere všechno místo, které ostatní položky nechají volné. |
shrink-0 | flex-shrink: 0; | Položka se nezmenšuje: zachová si svou velikost. |
Flex položky se ve výchozím stavu zmenšují (flex-shrink: 1), nejvýš ale na šířku svého nejdelšího slova. To se teď děje našim štítkům. shrink-0 položce zmenšování úplně zakáže. Hodí se pro věci, které si musí zachovat velikost, například malý kulatý obrázek vedle dlouhého textu: bez shrink-0 by se smáčkl do oválu.
Jak psát:
Pokyny
Přidejte seznamu štítků (prvku ul pod nadpisem Naše kočky) třídu flex-wrap. Štítky, které se nevejdou, se přesunou na další řádek a text každého štítku zůstane na jednom řádku. (Pokud se ve vašem náhledu vejde všech pět, zůstanou v jedné řadě.)
V oranžovém boxu je pole pro e-mail jen tak široké, jak prohlížeče pole dělají ve výchozím stavu. Přidejte poli (input) třídu flex-1: roztáhne se a vyplní řadu až k tlačítku Odebírat.
Nad náhledem je lišta Šířka náhledu. Klikněte v ní na 375 px, šířku mobilu. Formulářové pole nemůže být užší, než je jeho výchozí šířka, a tak se tlačítko vedle něj nevejde a vyčnívá z boxu. Přidejte třídu flex-wrap i formuláři (form): když nebude místo, tlačítko se přesune pod pole. Pak náhled vraťte tlačítkem Podle okna.
Začněte programovat zdarma
5/11