Cuprins:

Cum folosești flex în CSS?
Cum folosești flex în CSS?

Video: Cum folosești flex în CSS?

Video: Cum folosești flex în CSS?
Video: Learn Flexbox CSS in 8 minutes 2024, Martie
Anonim

rezumat

  1. Utilizare afişa: contracta ; a crea o contracta recipient.
  2. Utilizare justificare-conținut pentru a defini alinierea orizontală a articolelor.
  3. Utilizare align-items pentru a defini alinierea verticală a articolelor.
  4. Folosiți flex -direcție dacă aveți nevoie de coloane în loc de rânduri.
  5. Utilizare valorile rând-invers sau coloană-invers pentru a inversa ordinea articolelor.

În acest sens, la ce folosește display flex în CSS?

A contracta containerul extinde articolele pentru a umple spațiul liber disponibil sau le micșorează pentru a preveni debordarea. Cel mai important, cel flexbox layout-ul este independent de direcție, spre deosebire de layout-urile obișnuite (blocul care este pe verticală și inline care este pe orizontală).

Se poate întreba, de asemenea, ce este CSS Flex 1? contracta : 1 ; = contracta : 1 1 0n; (unde n este o unitate de lungime). contracta -creștere: un număr care specifică cât de mult va crește articolul în raport cu restul articolelor flexibile. contracta -shrink Un număr care specifică cât de mult se va micșora elementul față de restul articolelor flexibile. contracta -basis Lungimea articolului.

Ulterior, se poate întreba, de asemenea, ce este inline Flex CSS?

În linie - Contracta - Cel în linie versiune a contracta permite elementului, și copiilor săi, să aibă contracta proprietăți, rămânând în continuare în fluxul obișnuit al documentului/paginii web. Răspunde ca un element bloc, în ceea ce privește fluxul de documente. Două flexbox containerele nu ar putea exista pe același rând fără exces styling.

Care este orientarea implicită într-un container Flex?

The Mod implicit aranjament după aplicarea afișajului: contracta este ca articolele să fie aranjate de-a lungul axei principale de la stânga la dreapta. Animația de mai jos arată ce se întâmplă când contracta - direcţie : coloana este adăugată la recipient element. Poti de asemenea setați flex - direcţie la rând-inversare și coloană-inversare.

Recomandat: