Sisukord:

Kuidas kasutate CSS-is flexi?
Kuidas kasutate CSS-is flexi?

Video: Kuidas kasutate CSS-is flexi?

Video: Kuidas kasutate CSS-is flexi?
Video: The Complete React JS Course for Beginners - Learn React in 2 Hours! +timecodes 2024, November
Anonim

Kokkuvõte

  1. Kasutage kuva: painduv ; luua a painduv konteiner.
  2. Kasutage õigusta sisu, et määratleda üksuste horisontaalne joondus.
  3. Kasutage align-items, et määrata üksuste vertikaalne joondus.
  4. Kasutage flexi -suund, kui vajate ridade asemel veerge.
  5. Kasutage rea-tagurpidi või veeru-tagurpidi väärtused üksuste järjestuse ümberpööramiseks.

Mis kasu on CSS-is Display flexist?

A painduv konteiner laiendab üksusi, et täita vaba ruumi, või kahandab neid, et vältida ülevoolu. Kõige tähtsam on, flexbox paigutus on suunaagnostiline, erinevalt tavapaigutustest (plokk, mis on vertikaalselt põhinev ja sees, mis on horisontaalselt põhinev).

Võib ka küsida, mis on CSS Flex 1? painduv : 1 ; = painduv : 1 1 0n; (kus n on pikkuse ühik). painduv -grow: arv, mis määrab, kui palju üksus kasvab võrreldes ülejäänud paindlike üksustega. painduv -shrink Arv, mis määrab, kui palju üksus kahaneb võrreldes ülejäänud paindlike üksustega. painduv -basis Kauba pikkus.

Seejärel võib ka küsida, mis on inline Flex CSS?

Järjekorras - Flex - järjekorras versioon painduv võimaldab elemendil ja selle lastel omada painduv atribuudid, jäädes siiski dokumendi/veebi tavapärasesse voolu. See reageerib dokumendivoo osas nagu plokkelement. Kaks flexbox konteinerid ei saaks eksisteerida samal real ilma ülejäägita stiil.

Mis on Flexi konteineri vaikesuund?

The vaikimisi paigutus pärast kuva rakendamist: painduv on mõeldud üksuste paigutamiseks piki peatelge vasakult paremale. Allolev animatsioon näitab, mis millal juhtub painduv - suunas : veerg lisatakse konteiner element. Sa saad ka seada flex - suunas rea- ja veeru-tagurpidi.

Soovitan: