CSS FlexBox Właściwości | Wyjaśnione

Responsywna strona internetowa wymaga odniesienia elementów do zmiany ich zachowania, takich jak szerokość, wysokość, rozdzielczość, orientacja itp. Według rodzaju urządzenia za pomocą strony internetowej. CSS zapewnia określone podmioty, które pomogą Ci zbudować responsywną stronę internetową, taką jak zapytania medialne, siatka, flexbox itp. Tutaj w tym pismem skupiamy się na FlexBox i powiązanych z nim właściwości. Badani podkreślone w tym poście są następujące.

1. Co to jest Flexbox
2. Co to jest pojemnik na flex
3. Co to jest element Flex
4. Właściwości FlexBox

Co to jest Flexbox

Model układu FlexBox zapewnia wydajny i dynamiczny układ elementów, umieszczając je w pojemniku z równie rozproszoną przestrzenią. Ten układ sprawia, że ​​elementy reagują, co oznacza, że ​​elementy zmieniają swoje zachowanie według rodzaju wyświetlania ich urządzenia.

Flexbox w zasadzie elastyczne elementy i zapewnia im odpowiednią pozycję i symetrię.
Składa się z dwóch z dwóch komponentów, które są eleganckim pojemnikiem, a elementy Flex. Oba te elementy wyjaśniono poniżej.

Co to jest pojemnik na flex

Jest to element Flexbox, który określa właściwości elementu przodka, ustawiając jego wyświetlacz na flex lub 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.

Teraz, gdy dobrze rozumiemy flexbox i jego komponenty, zbadamy różne właściwości powiązane z Flexbox.

Właściwości FlexBox

Below we have explained in great depth the various properties linked with a flexbox.

Wyświetlaj właściwość

W celu stwierdzenia, w jaki sposób zostanie wyświetlony element, używana jest właściwość wyświetlania.

Składnia

Wyświetlacz: Flex;

Wyjaśnione parametry

Flex: Ta wartość wyświetla element jako pojemnik na flex.

Przykład

Załóżmy, że chcesz wyświetlać kontener Div jako Flexbox. Tak to się robi.

Html

W celu stwierdzenia, w jaki sposób zostanie wyświetlony element, używana jest właściwość wyświetlania.

Tutaj wygenerowaliśmy kontener DIV, a akapit został w nim zagnieżdżony.

CSS

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

Korzystając z klasy przypisanej do elementu div.

Wyjście

Div został pomyślnie wyświetlany jako Flexbox.

Reszta właściwości związanych z FlexBox jest podzielona na dwie kategorie, które są właściwościami flexa i właściwości Flex Item. Omówimy obie klasy osobno.

Flex Container Properties

Właściwości, które należą do tej kategorii, są następujące.

Właściwość kierowania flex

Ta właściwość służy do opisania kierunku elementów obecnych w flexbox.

Składnia

Kierowanie Flex: Row | Reverse Rowers | Kolumna | Kolumna -Neverse | początkowe | dziedziczyć;

Wyjaśnione parametry

wiersz: Ta domyślna wartość ułoży elementy poziomo.
Reverse Rowers: Ta wartość umieszcza elementy z rzędu, ale z odwrotnym kierunkiem.
kolumna: Układa elementy pionowo.
odwrotność kolumn: Układa elementy w kolumnie, ale odwrotnie.

Przykład

Umieśćmy niektóre elementy w Flexbox o „Row”.

Html

Przedmiot 1
Pozycja 2
Pozycja 3
Pozycja 4

W powyższym kodzie tworzymy większy kontener DIV i gniazdujemy w nim cztery kolejne pojemniki Div.

CSS

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

Tutaj wyświetlamy większy Div jako elegancki pojemnik i nadajemy mu trochę koloru, a na koniec jego kierunek jest ustawiony na rząd.

CSS

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

Teraz stylizujemy nasze przedmioty w pojemniku za pomocą podstawowych właściwości CSS.

Wyjście

Przedmioty zostały ułożone z rzędu.

Justify-Content Proper

Jeśli elementy w flexbox nie zużywają całkowicie poziomej przestrzeni, ta właściwość wyrównuje je na głównej osi.

Składnia

Justify-Content: Flex-start | ELEX-end | Centrum | przestrzeń między | przestrzeń | Space-nawet | początkowe | dziedziczyć;

Wyjaśnione parametry

Flex-start: Pozycjonuje elementy na początku kontenera i jest wartością domyślną.
ELEX-end: To umieszcza elementy na końcu pojemnika.
Centrum: To pozycjonuje elementy na środku pojemnika.
przestrzeń pomiędzy: Dodaje przestrzeń między przedmiotami.
kosmiczny: Dodaje przestrzenie przed, między i po każdym elemencie.
przestrzeń-nawet: Daje to każdemu przedmiotowi równe przestrzenie.

Przykład

Załóżmy, że chcesz uzasadnić swoją treść do centrum kontenera Flex.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Justify-Content: Center;

Wartość środka umieści wszystkie elementy Flex na środku pojemnika.

CSS

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

Korzystając z podstawowych CSS, stylizujemy elementy.

Wyjście

Przedmioty zostały pomyślnie umieszczone w centrum.

właściwość wyrównania-elementów

Jeśli elementy w flexbox nie zużywają całkowicie pionowej przestrzeni, ta właściwość wyrównuje je przez osi krzyżowy.

Składnia

_stretch _ Center _ Flex-start _ Flex-end _ Bazowa linia bazowa _ Początkowa _ dziedzictwo

Wyjaśnione parametry

rozciągać się: Jest to wartość domyślna, która rozciąga elementy do pasowania 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

Tutaj pokazaliśmy, jak działa wartość wyjściowa właściwości wyrównania.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Wysokość: 200px;
Wyrównanie: linia bazowa;

Aby odpowiednio zademonstrować tę właściwość, zapewniamy pewną wysokość kontenerowi Flex i ustawiamy właściwość wyrównania ITEMEMS na linię podstawową.

Wyjście

Nieruchomość działa poprawnie.

Flex-Wrap Proper

Jeśli na jednej linii elastycznej nie ma dużo miejsca, ta właściwość decyduje, czy owinąć elementy, czy nie.

Składnia

Flex-Wrap: Nowraph | Wrap | Reverse owijający | początkowe | dziedziczyć;

Wyjaśnione parametry

nowrap: Ta domyślna wartość nie zawiera elementów.
zawinąć: W razie potrzeby obejmuje elementy.
odwrotność owinięcia: W razie potrzeby obejmuje elementy, ale w odwrotny sposób.

Przykład

Aby zrozumieć tę nieruchomość, zapoznaj się z przykładem poniżej.

CSS

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

W powyższym kodzie ustawiliśmy właściwość Flex-Wrap na odwrotność, co oznacza, że ​​w razie potrzeby elementy w pojemniku zostaną owinięte, ale odwrotnie.

Wyjście

Przedmioty zostały owinięte w odwrotny sposób.

Własność wyrównana

Zmienia zachowanie właściwości Flex-Wrap i jest prawie podobny do właściwości wyrównania-elementów z jedyną różnicą, że wyrównuje linie flex, a nie elementy elastyczne.

Składnia

Align-Content: Flex-start | ELEX-end | Centrum | przestrzeń między | przestrzeń | Space-nawet | początkowe | dziedziczyć;

Wyjaśnione parametry

Flex-start: Pozycjonuje elementy na początku kontenera i jest wartością domyślną.
ELEX-end: To umieszcza elementy na końcu pojemnika.
Centrum: To pozycjonuje elementy na środku pojemnika.
przestrzeń pomiędzy: Dodaje przestrzeń między przedmiotami.
kosmiczny: Dodaje przestrzenie przed, między i po każdym elemencie.
przestrzeń-nawet: Daje to każdemu przedmiotowi równe przestrzenie.

Przykład

Oto przykład omawianej nieruchomości.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Wysokość: 300px;
Flex-Wrap: Wrap;
Align-Content: Space-Between;

Tutaj dodatkowo zwiększyliśmy wysokość pojemnika, abyś mógł lepiej zrozumieć tę właściwość. Ponadto przypisaliśmy właściwość wyrównanego kontaktową wartość przestrzeni, która doda przestrzeń między elementami.

Wyjście

Przestrzeń między przedmiotami została pomyślnie dodana.

właściwość Flex-Flow

Opisuje kierunek elementów, określając, czy owijać elementy, czy nie, co więcej, jest to właściwość skrótów dla follwoinga.

1. Kierunek przepływu
2. przepływ

Składnia

Flex-Flow: przepływowy przepływ | początkowe | dziedziczyć;

Wyjaśnione parametry

Kierunek przepływu: Definiuje kierunek elementów.
przepływ: Stwierdza, że ​​elementy powinny być owinięte, czy nie.

Przykład

Rozważ poniższy przykład, aby zrozumieć działanie tej właściwości.

CSS

.Flexbox
Wyświetlacz: Flex;
kolor tła: akwamaryna;
Flex-Flow: Opakowanie kolumnowe;

Korzystając z właściwości skrótów, ustawiliśmy kierunek elementów Flex jako odwrotność kolumn podczas owijania ich za pomocą wartości opakowania.

Wyjście

Elementy zostały owinięte w kolumnie, ale w odwrotnej kolejności.

Teraz omówimy naszą następną kategorię.

Właściwości pozycji Flex

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

Zamów własność

Definiuje kolejność elementu flex w stosunku do innych elementów obecnych w flexbox.

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 jak ustawić kolejność elementów w Flexbox.

Html

Przedmiot 1
Pozycja 2
Pozycja 3
Pozycja 4

Aby właściwie zrozumieć tę właściwość.

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 najpierw wyświetlamy kontener Div jako Flexbox i zapewniamy mu pewną wysokość, aby poprawnie zademonstrować działanie, a na koniec stylizujemy nasze eleganckie przedmioty.

CSS

#przedmiot 1
Zamówienie: 4;

#item2
Zamówienie: 1;

#item3
Zamówienie: 2;

#Item4
Zamówienie: 3;

Korzystając z tych identyfikatorów, przypisujemy pewne kolejność do każdego elementu.

Wyjście

Przedmioty zostały umieszczone w przypisanej kolejności.

Wyrównanie własności

Ta właściwość służy do zdefiniowania pozycjonowania elementów w pojemniku Flex. Ta właściwość zastępuje właściwość Align-Items i jest używana na elementach Flex.

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 przodków lub jeśli nie ma pojemnika przodków, rozciąga przedmiot.
rozciągać się: Rozciąga przedmioty, aby pasowały do ​​pojemnika.
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ż przykład poniżej.

CSS

#item2
Align-Self: Center;

#item3
Align-Self: Flex-Start;

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

Wyjście

Oba elementy zostały pomyślnie wyrównane.

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ść wynosi 0.

Przykład

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

CSS

#item2
Flex-wzrost: 10;

Ustawiliśmy wartość właściwości Flex-Rośl na 10, co oznacza, że ​​pozycja 2 będzie 10 razy większa w porównaniu z innymi elementami.

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: Stwierdza 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, ta właściwość jest używana.

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: Stwierdza 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

#Item4
Flex-basis: 300px;

Ustawiliśmy Flex-Basis pozycji 4 na 300px, co oznacza, że ​​oryginalna długość czwartej pozycji będzie wynosił 300px.

Wyjście

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

Flex właściwość

Ta nieruchomość ustawia wzrost, skurcz i długość przedmiotu jednocześnie

1. Flex-Growth
2. Flex-Shrink
3. Flex-basis

Składnia

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

Wyjaśnione parametry

Flex-Ros: Określa wzrost pozycji Flex w odniesieniu do innych pozycji w pojemniku.
Flex-Shrink: Stwierdza 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

#item2
Flex: 0 0 250px;

Pozycja 2 nie będzie się nie rosła, ani się kurczy, jednak będzie miała długość 250px.

Wyjście

Nieruchomość działa poprawnie.

Wniosek

Właściwości powiązane z FlexBox są podzielone na dwie kategorie, które są właściwościami Flex Container, i właściwości Flex Box. Właściwości związane z kontenerem Flex to; Flex-Flow, Flex-kierunek, wyrównanie, justify-content itp. Tymczasem właściwości powiązane z elementem Flex są; Zamów, flex-wzrost, flex-basis, wyrównanie itp. Wszystkie te właściwości są omówione w tym samouczku wraz z odpowiednimi przykładami.