Co to jest Flexbox w CSS?

Projektując responsywną stronę internetową, chcesz, aby Twoje elementy zmieniły ich zachowanie, takie jak szerokość, wysokość, rozdzielczość, orientacja itp. Ten post omawia, w jaki sposób możesz sprawić, by swoje elementy reakcje za pomocą układu FlexBox. Omawiane tematy są następujące.

1. Co to jest Flexbox
2. Tło
3. Komponenty FlexBox
4. Oś Flexbox
5. Właściwości FlexBox

Co to jest Flexbox

CSS Flexbox to model układu, który umożliwia wydajne i dynamiczne układ elementów. Ten układ jest jednowymiarowy i pozwala umieszczać elementy wewnątrz pojemnika z równie rozłożoną przestrzenią.

Ten układ sprawia, że ​​elementy reagują, co oznacza, że ​​elementy zmieniają swoje zachowanie według rodzaju wyświetlania ich urządzenia. Sprawia, że ​​elementy są elastyczne i zapewnia im odpowiednią pozycję i symetrię.

FlexBox został wprowadzony w CSS w wersji 3, aby umówić elementy w pojemniku bardziej wydajnie i dynamicznie. Przed FlexBox początkowo były cztery metody układu, które wymieniliśmy poniżej.

1. Blok
   W celu tworzenia sekcji na stronie internetowej używany jest układ bloku.
2. Wline
   Jest to metoda układu, która jest używana do tekstu.
3. Tabela
   Jest to używane do tabeli z dwuwymiarowymi danymi.
4. Ustawione
   Jest to używane do określonej pozycji elementu.

Teraz omówimy różne elementy Flexbox.

Komponenty FlexBox

Flexbox składa się z dwóch komponentów, które wyjaśniliśmy poniżej.

1. Flex-Container
   Ten komponent Flexbox określa właściwości elementu przodka, ustawiając jego wyświetlacz na flex lub flex.
2. Flex-Items
   Opisuje właściwości elementów następców.

Oto wizualna reprezentacja Flexbox.

Oś Flexbox

W przypadku układu FlexBoxa należy zadbać o dwie osie. Te osie zostały wymienione poniżej.

1. Oś główna
2. Oś krzyżowa

Obie osie są szczegółowo wyjaśnione poniżej.

Oś główna

Oś główna (od lewej do prawej) jest ustawiona przez kierunek flex nieruchomość. Ta oś może uczynić cztery wartości; wiersz, odwrotność wiersza, kolumna i odwrotność kolumn.

W przypadku dwóch pierwszych wartości, które są wiersz, I Reverse Rowers, Flexbox wykazuje kierunek wline, co oznacza, że ​​flex pojemnik i elementy będą wyrównane w poziomie. Podczas gdy dla kolumna, I odwrotność kolumn Wartości Kierunek Flexbox będzie blokiem lub w prostszych słowach pojemnik i elementy będą ułożone w pionie.

Oś krzyżowa

Kierunek tej osi jest prostopadły do ​​osi głównej. Jeśli kierunek osi głównej jest dostosowany do wiersz Lub Reverse Rowers Następnie oś krzyża porusza się wzdłuż kolumn w dół, podczas gdy w przypadku kolumny i odwrotność kolumny oś porusza się wzdłuż wierszy.

Obie osie mają początek, punkt końcowy i pewną długość między tymi punktami.

Właściwości FlexBox

Właściwości Flexbox zostały podane poniżej.

1. wyświetlacz
Wyświetla element jako flexbox.

2. kierunek flex
Ta właściwość określa kierunek elementów w pojemniku Flex.

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

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

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

6. Align-Content
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.

7. Flex Flow
Skrót i właściwość do kierowania elastycznego i elastycznego.

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

9. wyrównać jaźń
Ta właściwość zastępuje właściwość Align-Items i jest używana na elementach Flex.

10. przewód
Stwierdza długość elementów elastycznych w stosunku do innych elementów obecnych w flexbox.

Zobaczmy przykład.

Przykład
Poniżej pokazaliśmy przykład, jak utworzyć flexbox.

Html

Przedmiot
Przedmiot
Przedmiot<
Przedmiot

Tutaj stworzyliśmy kontener DIV o klasie „Flexbox” i gniazdowanie czterech kolejnych pojemników Div w nim.

CSS

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

Po pierwsze, przypisujemy głównego kontenera Div elest wyświetlacz, aby był flexbox, a następnie nadajemy mu trochę koloru tła.

CSS

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

Wreszcie, stylizujemy elementy Flex obecne w Flexbox za pomocą różnych właściwości CSS.

Wyjście

Flexbox został pomyślnie wygenerowany.

Wniosek

FlexBox to model układu, który układa elementy w sposób wydajny i dynamiczny, jednocześnie dając im równe spacje rozłożone w pojemniku. Ten układ sprawia, że ​​elementy reagują, co oznacza, że ​​elementy zmieniają swoje zachowanie według rodzaju wyświetlania ich urządzenia. Składa się z elastycznego pojemnika i przedmiotów, które są uważane za jego komponenty. Ponadto ma osie, które są główne i krzyżowe i wykazuje wiele właściwości. Ten zapis obejmuje wszystkie niezbędne szczegóły dotyczące flexbox wraz z odpowiednim przykładem.