Kako uporabljate flex v CSS?

2024 Avtor: Lynn Donovan | [email protected]. Nazadnje spremenjeno: 2024-01-18 08:29

Povzetek

1. Uporaba zaslon: upogniti ; ustvariti a upogniti posoda.
2. Uporaba justify-content za določitev vodoravne poravnave elementov.
3. Uporaba align-items, da določite navpično poravnavo elementov.
4. Uporabite flex -smer, če potrebujete stolpce namesto vrstic.
5. Uporaba vrednosti obrnjene vrstice ali stolpca, da obrnete vrstni red elementov.

V zvezi s tem, kakšna je uporaba display flex v CSS?

A upogniti vsebnik razširi predmete, da zapolni prosti prostor, ali jih skrči, da prepreči prelivanje. Najpomembneje je, da flexbox postavitev je odvisna od smeri v nasprotju z običajnimi postavitvami (blok, ki je navpično zasnovan in v vrstici, ki je vodoravno zasnovan).

Lahko se tudi vprašamo, kaj je CSS Flex 1? upogniti : 1 ; = upogniti : 1 1 0n; (kjer je n dolžinska enota). upogniti -grow: Število, ki določa, koliko bo predmet zrasel glede na ostale prilagodljive elemente. upogniti -shrink Številka, ki določa, koliko se bo postavka skrčila glede na ostale prilagodljive elemente. upogniti -basis Dolžina predmeta.

Kasneje se lahko vprašamo tudi, kaj je inline Flex CSS?

V vrsti - Flex - The v vrsti različica upogniti omogoča, da ima element in to so otroci upogniti lastnosti, medtem ko še vedno ostajajo v običajnem toku dokumenta/spletne strani. V smislu pretoka dokumenta se odziva kot blokovni element. dva flexbox vsebniki ne bi mogli obstajati v isti vrstici brez presežka styling.

Kakšna je privzeta usmerjenost znotraj vsebnika Flex?

The privzeto razporeditev po uporabi zaslona: upogniti je za elemente, ki so razporejeni vzdolž glavne osi od leve proti desni. Spodnja animacija prikazuje, kaj se zgodi, ko upogniti - smer : stolpec je dodan v posoda element. Lahko tudi nastavi flex - smer na row-reverse in stolpce-reverse.