Elementy elastyczne w CSS | Wyjaśnione

FlexBox to model układu, który dynamicznie wyrównuje elementy w pojemniku, przypisując je równo rozproszona przestrzeń. Ten układ okazuje się pomocny w reagowaniu elementów, co oznacza, że ​​elementy zmienią ich zachowanie według rodzaju wyświetlania ich urządzenia. Ten model składa się z dwóch komponentów, które są elementami Flex Contener i Flex. Jednak w tym zapisie skupiamy się na kontenerach Flex. Osobów omawianych w tym pismach są następujące.

1. Co to jest element Flex
2. Właściwości pozycji Flex

Co to jest element Flex

Element Flex opisuje właściwości elementów następców, a ponadto w kontenerze Flex może znajdować się wiele elementów Flex.

Te elementy renderują niektóre właściwości, które zostały szczegółowo wyjaśnione poniżej.

Właściwości pozycji Flex

Następujące właściwości są powiązane z elementem Flex.

Zamów własność

W celu zdefiniowania kolejności elementu flex w stosunku do innych elementów obecnych w flexboxu, właściwość zamówienia jest używana.

Składnia

Zamów: num | początkowe | dziedziczyć;

Wyjaśnione parametry
num: Ta wartość określa kolejność elementu Flex. Domyślnie wartość wynosi 0.

Przykład
Oto przykład właściwości zamówienia.

Html

Przedmiot 1
Pozycja 2
Pozycja 3
Pozycja 4

W powyższym kodzie utworzono kontener DIV, a cztery kolejne Div zostały w nim zagnieżdżone. Każdy z zagnieżdżonych div otrzymał jakiś identyfikator.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;

Tutaj większy DIV został wyświetlony jako pojemnik na flex i otrzymał trochę koloru tła.

CSS

.Przedmioty div
kolor tła: Lightgrey;
Margines: 15px;
Wyściółka: 20px;
Rozmiar czcionki: 35px;

Teraz stylizujemy nasze przedmioty obecne w pojemniku Flex z niektórymi podstawowymi właściwościami CSS.

CSS

#przedmiot 1
Zamówienie: 4;

#item2
Zamówienie: 1;

#item3
Zamówienie: 2;

#Item4
Zamówienie: 3;

W powyższym kodzie używamy identyfikatora każdego elementu, aby zapewnić mu pewne zamówienie.

Wyjście

Każdy przedmiot został umieszczony zgodnie z jego zamówieniem.

Właściwość Flex-Repl

Ta właściwość opisuje zakres, w jakim element będzie rosł w stosunku do innych elementów obecnych w pojemniku.

Składnia

Flex-Brow: Numer | początkowe | dziedziczyć;

Wyjaśnione parametry
numer: Ta wartość stwierdza zakres wzrostu elementu. Domyślnie wartość to 0.

Przykład
Załóżmy, że chcemy po prostu wyhodować jeden przedmiot w odniesieniu do innych. Oto jak to robisz.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;

.Przedmioty div
kolor tła: Lightgrey;
Margines: 15px;
Wyściółka: 20px;
Rozmiar czcionki: 35px;

#przedmiot 1
Flex-wzrost: 15;

Ustawiamy wartość właściwości Flex-Rośl na 15. Pozycja 1 będzie 15 razy większa w porównaniu z innymi przedmiotami.

Wyjście

Nieruchomość działa poprawnie.

Flex-Shrink Property

Ta właściwość określa stopień, w jakim element zmniejszy się w stosunku do innych elementów obecnych w pojemniku.

Składnia

Flex-shrink: liczba | początkowe | dziedziczyć;

Wyjaśnione parametry
numer: Stanowi stopień, w jakim element się kurczy. Domyślnie wartość wynosi 0.

Przykład
Oto przykład tej właściwości.

Html

1
2
3
4
5

Aby zrozumieć działanie tej właściwości, stworzyliśmy większy kontener DIV i zagnieżdżliśmy pięć kolejnych kontenerów Div w większym. Ponadto każdemu Divowi przypisano inny kolor tła, aby pojęcie tej właściwości można poprawnie wykazać.

CSS

.pojemnik
Wyświetlacz: Flex;
szerokość: 400px;
Wysokość: 200px;

.kontener div
Flex-basis: 100px;

Tutaj wyświetlamy większy div jako flexbox, co ponadto dajemy też trochę szerokości i wysokości. Na koniec ustawiamy jego flex-basis na 100px, co określa długość początkowa elementu Flex.

CSS

.przedmiot
Flex-Shrink: 4;

Korzystając z klasy przypisanej do dwóch ostatnich kontenerów Div, ustawiamy ich flex-shrink na 4, co oznacza, że ​​te elementy będą 4 razy mniejsze niż inne elementy w siatce.

Wyjście

Pozycje 4 i 5 są mniejsze niż reszta przedmiotów.

Nieruchomość Flex-Basis

W celu ustawienia długości początkowej elementu Flex, stosowana jest właściwość Flex-Basis.

Składnia

Flex-basis: Auto | Num | początkowe | dziedziczyć;

Wyjaśnione parametry
automatyczny: Jest to wartość domyślna, która zapewnia element o długości równej długości elementu Flex.

num: Przedstawia oryginalną długość przedmiotu.

Przykład
Załóżmy, że chcesz podać elegancki element pewnej długości początkowej. Pokazaliśmy, jak to się robi.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;

.Przedmioty div
kolor tła: Lightgrey;
Margines: 15px;
Wyściółka: 20px;
Rozmiar czcionki: 35px;

#item3
Flex-basis: 300px;

Ustawiamy flex-basis pozycji 3 na 300px, co oznacza, że ​​oryginalna długość trzeciej elementu będzie wynosił 300px.

Wyjście

Początkowa długość trzeciego elementu została ustawiona pomyślnie.

Flex właściwość

Ta właściwość ustawia wzrost, skurcz i długość przedmiotu. Jest to właściwość skrótów dla Flex-Growth, Flex-Shrink i Flex-Basis.

Składnia

Flex-Property: Flex-Rośl Flex-Shrink Flex-basis | początkowe | dziedziczyć;

Wyjaśnione parametry
Flex-Rosch: Określa wzrost pozycji Flex w odniesieniu do innych pozycji w pojemniku.

Flex-Shrink: Stanowi kurczenie się przedmiotu w stosunku do innych przedmiotów

Flex-basis: Zapewnia początkową długość przedmiotu.

Przykład
Zapoznaj się z przykładem poniżej, aby zrozumieć nieruchomość Flex.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;

.Przedmioty div
kolor tła: Lightgrey;
Margines: 15px;
Wyściółka: 20px;
Rozmiar czcionki: 35px;

#item2
Flex: 0 0 300px;

Korzystając z właściwości skrótów, wzrost i skurcz drugiego elementu został ustawiony na 0, co oznacza, że ​​ten element nie będzie rosła, ani kurczy się, jednak będzie miała długość 300px.

Wyjście

Nieruchomość działa poprawnie.

Wyrównanie własności

W celu opisania rozmieszczenia elementów wewnątrz flex pojemnika używana jest właściwość wyrównana.

Składnia

Align-Self: Auto | rozciągnij | Centrum | Flex-start | ELEX-end | linia bazowa | początkowe | dziedziczyć;

Wyjaśnione parametry
automatyczny: Jest to wartość domyślna, która albo dziedziczy cechy po kontenerze przodka lub jeśli nie ma pojemnika przodków, rozciąga przedmiot.

rozciągać się: Rozciąga przedmioty, aby zmieściły się w pojemniku.

Centrum: To pozycjonuje elementy na środku pojemnika.

Flex-start: Pozycjonuje elementy na początku kontenera i jest wartością domyślną.

ELEX-end: To umieszcza elementy na końcu pojemnika.

linia bazowa: To pozycjonuje elementy na podstawie pojemnika.

Przykład
Rozważ poniższy przykład, aby zrozumieć właściwość wyrównania.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Wysokość: 250px;

.Przedmioty div
kolor tła: Lightgrey;
szerokość: 150px;
Margines: 15px;
Wyściółka: 20px;
Rozmiar czcionki: 35px;

Tutaj zapewniliśmy pewną wysokość kontenerowi Flex, aby pokazać koncepcję tej właściwości w jasny sposób, tymczasem reszta kodu jest taka sama jak powyżej.

CSS

#item2
Align-Self: Flex-end;

#item3
Align-Self: Flex-Start;

Za pomocą przypisanych identyfikatorów pozycja 2 została umieszczona na końcu pojemnika, jednak pozycja 3 została umieszczona na początku pojemnika.

Wyjście

Oba elementy zostały ustawione inaczej za pomocą właściwości wyrównania.

Wniosek

Element Flex jest składnikiem Flexbox, który określa właściwości elementów następcy. Możesz umieścić liczne elementy Flex w pojemniku Flex. Istnieją pewne właściwości CSS związane z tymi elementami, takimi jak zamówienie, wyrównanie, flex-wzrost, flex itp. Każdy z tych renderuje wiele wartości i służy inny cel, który wykazaliśmy za pomocą odpowiednich przykładów.