Wszystko o właściwościach Flexbox

Ideą właściwości Flexbox jest zapewnienie kontenerowi możliwości automatycznej zmiany szerokości, wysokości i kolejności jego elementów, aby jak najlepiej wypełnić dostępne miejsce. Może to być bardzo przydatne, aby pomieścić elementy o różnych rozmiarach ekranu i urządzeniach. Przedmioty są rozszerzane, aby wypełnić dowolne wolne miejsce, lub zmniejszane, aby uniknąć przepełnienia.

Siatka CSS Flexbox Dla początkujących

CSS jest jedną z pierwszych i najłatwiejszych rzeczy do nauczenia się w tworzeniu i projektowaniu stron internetowych, ale nie pomyl jej prostoty z brakiem funkcji. Ma wiele niesamowitych funkcji i możliwości, które można wykorzystać, a jednym z nich jest stosunkowo nowy moduł układu: właściwości Flexbox.

Właściwości Flexbox są jednym z nowszych układów dostępnych w CSS3 i jest wiele do nauczenia się na ten temat. Tutaj zapoznamy się z układem i sposobem jego użycia. Zanim jednak zaczniemy, oto kilka podstawowych informacji o właściwościach Flexbox:

Jakie są tryby układu?

Mówiąc najprościej, siatka CSS Flexbox to tryb układu. CSS ma wiele istniejących trybów układu. Tryb układu bloków (jak display: block) istnieje już od dłuższego czasu. Układy bloków są dobrym wyborem do stylizowania pełnych dokumentów. W rzeczywistości przeglądarka internetowa domyślnie traktuje kilka elementów, takich jak div i akapity, jako poziom blokowy.

Kolejny typowy tryb układu jest wbudowany. Silny znacznik, znacznik wejściowy i znacznik zakotwiczenia są przykładami elementów na poziomie wbudowanym. Narzędzia programistyczne Google Chrome pozwalają nawet wyświetlić „styl obliczeniowy” elementu w celu określenia właściwości CSS i wartości, które zostały zastosowane do elementów, które nie zostały wyraźnie określone przez programistę.

Względnie nowszy układ właściwości Flexbox (Elastyczne pudełko) został zaprojektowany jako bardziej wydajna metoda układania, wyrównywania i rozdzielania przestrzeni między elementami kontenera, nawet jeśli rozmiar tych elementów jest dynamiczny lub nieznany. Stąd termin „elastyczny”.

Koncepcja właściwości Flexbox

Najważniejszą cechą właściwości Flexbox jest to, że jest niezależny od kierunku. Podczas gdy układ bloków jest oparty na pionie, a układ wbudowany na poziomie, Flexbox nie jest nim. Blokowanie i wstawianie działa dobrze w odpowiednich sytuacjach, ale brakuje elastyczności, aby obsługiwać skomplikowane lub duże aplikacje, szczególnie jeśli chodzi o zmianę orientacji, rozciąganie, kurczenie, zmianę rozmiaru i inną zmianę wymiarów elementów.

Gdzie są używane właściwości Flexbox?

Podobnie jak każdy inny układ CSS, Flexbox najlepiej jest używać w określonych sytuacjach. W szczególności jest odpowiedni dla małych układów i komponentów aplikacji. W przypadku układów na większą skalę lepszym wyborem byłby układ siatki.

Dlaczego preferowany jest Flexbox?

Wielu programistów i projektantów preferuje właściwości Flexbox, kiedy tylko mogą (czasem zbyt często!). Wynika to z faktu, że właściwości Flexbox są łatwiejsze w użyciu; pozycjonowanie elementów jest znacznie prostsze, dzięki czemu można uzyskać bardziej złożone układy przy mniejszym kodowaniu. Innymi słowy, upraszcza proces programowania.

Przewodnik po właściwościach Flexbox

Teraz, gdy wiesz trochę o właściwościach Flexbox oraz o tym, jak i dlaczego to działa, oto szczegółowy przewodnik po układzie. Model układu składa się z kontenera nadrzędnego, zwanego również „kontenerem elastycznym”. Bezpośrednie dzieci z tego pojemnika nazywane są „przedmiotami elastycznymi”.

Układ przeszedł kilka iteracji i zmian składniowych na przestrzeni lat od czasu jego pierwszej wersji roboczej w 2009 roku. Najnowsza specyfikacja Flexbox jest obsługiwana w następujących przeglądarkach internetowych:

  • Opera 17+
  • Internet Explorer 11+
  • Mozilla Firefox 28+
  • Google Chrome 29+
  • Apple Safari 6.1+
  • Android 4.4+
  • iOS 7.1+

Terminologia używana we właściwościach Flexbox

Oto kilka podstawowych terminów używanych w układzie właściwości Flexbox:

  • Wyświetlanie: to polecenie służy do definiowania kontenera elastycznego. Może być wbudowany lub blokowy, w zależności od. Definiuje także zawartość elastyczną dla wszystkich elementów w kontenerze. Przykład:

.pojemnik (

wyświetlacz: flex; / * lub inline-flex * /

)

  • Kolejność: elementy Flex są domyślnie układane zgodnie z kolejnością źródłową, ale właściwość „order” może kontrolować kolejność, w jakiej elementy pojawiają się w kontenerze. Przykład:

.item (

zamówienie: ;

)

  • Kierunek gięcia : To polecenie ustawia główną oś, określając kierunek, w którym elementy giętkie są umieszczane w pojemniku. Elementy elastyczne można układać przede wszystkim w kierunku pionowym lub poziomym. Przykład:

.pojemnik (

flex-direction: wiersz | wiersz-do tyłu | kolumna | kolumna-do tyłu;

)

  • Flex-grow: Ta kolejność określa zdolność elementu Flex do automatycznego skalowania, jeśli ma miejsce. Może przyjąć wartość jednostkową, która ma służyć jako proporcja. Ta wartość określa, ile miejsca powinien zająć element w elastycznym pojemniku. Na przykład, jeśli wszystkie przedmioty mają Flex-Grow ustawioną na 1, pozostała przestrzeń w pojemniku zostanie równo rozdzielona między wszystkie dzieci. Jeśli wartość wynosi 2, pozostała przestrzeń zajmie dwa razy więcej miejsca niż reszta. Przykład:

.item (

flex-grow:; / * domyślnie 0 * /

)

  • Flex-shrink: Robi to dokładnie odwrotnie niż Flex-Grow, ponieważ zmniejsza w razie potrzeby elementy Flex. Przykład:

.item (

flex-shrink:; / * domyślnie 1 * /

)

  • Flex-base: ta kolejność określa domyślny rozmiar elementów, zanim pozostała przestrzeń zostanie rozdzielona. Może to być długość, na przykład 5rem lub 20%, lub słowo kluczowe. Słowo kluczowe „auto” wskazuje, że należy zmierzyć szerokość i wysokość elementu, a słowo kluczowe „content” wskazuje, że rozmiar elementu zależy od jego zawartości. Przykład:

.item (

flex-base: | automatyczny; / * domyślna auto * /

)

  • Flex: Jest to skrótowy skrót dla wszystkich powyższych trzech właściwości: flex-grow, flex-base i flex-shrink. Domyślna wartość to „0 1 auto”.

.item (

flex: brak | (||)

)

  • Justify-content: Ta kolejność określa wyrównanie głównej osi i pomaga rozdzielić dodatkowe wolne miejsce, jeśli pozostało, gdy elementy są nieelastyczne lub osiągnęły maksymalny rozmiar. Pomaga to również kontrolować wyrównanie elementu w przypadku przepełnienia.

.pojemnik (

justify-content: flex-start | elastyczny koniec | centrum | odstęp między | kosmos;

)

  • Wyrównaj elementy: służy do zdefiniowania domyślnego zachowania układu elementów elastycznych na osi poprzecznej bieżącej linii. Jest to zasadniczo wersja „justify-content” na osi poprzecznej, która jest prostopadła do osi głównej. Przykład:

.pojemnik (

align-items: flex-start | elastyczny koniec | centrum | poziom podstawowy | rozciągać;

)

  • Wyrównaj zawartość: ta kolejność wyrównuje linie kontenera w przypadku, gdy na osi poprzecznej znajduje się dodatkowe miejsce. Jest podobny do „justify-content”, ale dla osi poprzecznej zamiast głównej. Jeśli istnieje tylko jedna linia elementów elastycznych, ta właściwość nie ma żadnego efektu. Przykład:

.pojemnik (

align-content: flex-start | elastyczny koniec | centrum | odstęp między | kosmos | rozciągać;

)

Korzystanie z właściwości Flexbox

Aby użyć układu Flexbox, możesz po prostu ustawić właściwość display na elemencie nadrzędnym HTML, jak poniżej:

.flex-container (

display: -webkit-flex; / * Safari * /

wyświetlacz: flex;

)

Jeśli wolisz wyświetlać się jak element wbudowany, możesz napisać w:

.flex-container (

display: -webkit-inline-flex; / * Safari * /

wyświetlacz: inline-flex;

)

Wymagane jest tylko ustawienie tej właściwości na nadrzędnym kontenerze elastycznym i jego elementach natychmiastowego elastycznego. Kontenerowe dzieci automatycznie staną się przedmiotami elastycznymi.

Polecane kursy

  • Kurs online na temat darmowego jQuery
  • Kurs online na bezpłatny Angular JS
  • Szkolenie online na Mudbox
  • Szkolenie certyfikacyjne w darmowym Ruby

Właściwości Flexbox - Właściwości kontenera Flex

Istnieje wiele sposobów grupowania właściwości Flexbox, a najłatwiejszym sposobem na ich poznanie jest podzielenie ich na właściwości kontenera Flex i właściwości przedmiotu. Właśnie omówiliśmy niektóre z powyższych właściwości elastycznego pojemnika. Spójrzmy na resztę:

  • Kierunek gięcia: rząd lub kolumna

Właściwość flex-direction może być ułożona jako kolumny pionowo lub rzędy poziomo. Zgodnie z kierunkiem wiersza elementy elastyczne są domyślnie układane od lewej do prawej. Odwrócenie wiersza zmienia ten kierunek od prawej do lewej. Domyślnie kierunek kolumny jest od góry do dołu, a funkcja odwracania kolumny odwraca to do kierunku od dołu do góry.

  • Flex-wrap: nowrap lub wrap

Właściwość flex-wrap kontroluje, czy elementy potomne kontenera flex są rozmieszczone w wielu lub pojedynczych liniach, oraz kierunek, w którym nowe linie są układane w stos. Wartość nowrap powoduje, że elementy elastyczne są wyświetlane w jednym wierszu, domyślnie zmniejszone, aby pasowały do ​​szerokości kontenera. Wartość zawijania powoduje, że elementy elastyczne są wyświetlane w różnych wierszach w kierunku od lewej do prawej lub od góry do dołu. Możesz także dodać zawijanie do tyłu, aby również zmienić kolejność. Wartość domyślna to nowrap.

  • Flex-flow

Ta właściwość jest w skrócie skrótem do ustawiania razem właściwości flex-wrap i flex-wrap. Wartość domyślna to „teraz nowrap”. Przykład:

.flex-container (

flex-flow: ||

)

  • Justuj treść

Właściwość justify-content ma cztery wartości: flex-start, aby wyrównać elementy do lewej strony kontenera; elastyczny koniec, aby wyrównać elementy do prawej strony; środek, aby wyrównać ze środkiem; odstęp między nimi, aby wyrównać elementy z jednakowymi odstępami między nimi, przy czym pierwszy i ostatni element zostaną wyrównane do krawędzi pojemnika; i spacje wokół, aby wyrównać elastyczny element z równymi odstępami wokół nich, w tym pierwszy i ostatni element. Flex-start jest wartością domyślną.

  • Wyrównaj elementy

Ta właściwość ma pięć wartości: rozciągnij, aby skalować w górę elastyczne elementy, aby wypełnić całą szerokość lub wysokość od początku do końca pojemnika; flex-start do układania przedmiotów na starcie; flex-end do układania przedmiotów na krzyż; środek, aby wyrównać elementy do środka osi poprzecznej; i linię bazową, aby wyrównać elementy, aby ich linie bazowe były wyrównane. Rozciągnięcie jest wartością domyślną.

  • Wyrównaj zawartość

Ta właściwość wyrównuje linie elastycznego kontenera, gdy w osi poprzecznej znajduje się dodatkowe miejsce. Jego wartości to: rozciągnij, aby rozdzielić przestrzeń po każdym wierszu; flex-start, aby układać przedmioty w kierunku skrzyżowania; flex-end do układania przedmiotów w kierunku poprzecznym; środek do układania elementów w środku osi poprzecznej; space-around, aby równomiernie rozdzielić przestrzeń wokół elementów flex. Wartość domyślna to stretch.

Właściwości Flexbox - właściwości elementu Flex

Teraz, gdy wiesz już o właściwościach kontenera Flexbox, spójrzmy na właściwości elementu:

  • Zamówienie

Ta właściwość kontroluje kolejność pojawiania się elementów potomnych kontenera Flex. Są one domyślnie zamawiane w elastycznym kontenerze.

.flex-item (

zamówienie: ;

)

Możesz zmieniać kolejność elementów elastycznych bez konieczności restrukturyzacji kodu HTML. Wartość domyślna to zero.

  • Wyrównaj

Ta właściwość umożliwia zastąpienie domyślnego wyrównania określonego elementu elastycznego. Możesz użyć wartości z elementów wyrównania dla tej właściwości.

.flex-item (

align-self: auto | flex-start | elastyczny koniec | centrum | poziom podstawowy | rozciągać;

)

Wartość auto w align-self jest obliczana na podstawie wartości elementów align na elemencie nadrzędnym elementu. Jeśli element nie ma elementu nadrzędnego, zamiast tego stosuje się rozciągnięcie.

Podstawowe przykłady

To wszystko, co musisz wiedzieć, aby korzystać z układu siatki CSS Flexbox. Teraz nadszedł czas, aby ćwiczyć to, czego się nauczyłeś. Oto kilka przykładów, które pokazują, w jaki sposób wszystkie te właściwości idą w parze. Zacznijmy od czegoś absolutnie prostego:

.rodzic (

wyświetlacz: flex;

wysokość: 300 pikseli;

)

.child (

szerokość: 100px;

wysokość: 100 pikseli;

margines: auto;

)

To przykład idealnego centrowania. Wartości wysokości i szerokości można dowolnie zmieniać. Kluczem tutaj jest ustawienie marginesu na „auto”, tak aby elastyczny pojemnik automatycznie absorbował dodatkową przestrzeń. Wystarczająco proste!

Teraz przejdźmy do dodawania jeszcze kilku właściwości: listy z sześcioma elementami o ustalonych wymiarach, które mogą być automatycznie dostosowywane. Muszą być równomiernie rozmieszczone na osi poziomej.

.flex-container (

wyświetlacz: flex;

justify-content: space-around;

)

Następnie spróbujmy wyśrodkować wyrównaną do prawej nawigację na średnich ekranach i uczynić ją jednokolumnową na małych urządzeniach.

/* Duży */

.navigation (

wyświetlacz: flex;

flex-flow: zawijanie wierszy;

justify-content: flex-end;

)

/ * Średnie ekrany * /

@media all i (max-width: 800px) (

.navigation (

justify-content: space-around;

)

)

/ * Małe ekrany * /

@media all i (maksymalna szerokość: 500 pikseli) (

.navigation (

kierunek zgięcia: kolumna;

)

)

Czas pójść o krok dalej! Wypróbujmy najpierw układ mobilny z trzema kolumnami, stopką i nagłówkiem o pełnej szerokości i niezależnymi od kolejności źródeł.

.wrapper (

wyświetlacz: flex;

flex-flow: zawijanie wierszy;

)

/ * Mówimy, że wszystkie elementy mają szerokość 100% * /

.header, .main, .nav, .aside, .footer (

flex: 1 100%;

)

/ * Opieramy się na zamówieniu źródłowym w przypadku podejścia opartego na urządzeniach mobilnych * /

/ * Średnie ekrany * /

@media all i (min-width: 600px) (

.aside (flex: 1 auto; )

)

/ * Duże ekrany * /

@media all i (min-width: 800px) (

.main (flex: 2 0px; )

.aside-1 (zamówienie: 1; )

.main (zamówienie: 2; )

.aside-2 (zamówienie: 3; )

.footer (zamówienie: 4; )

)

Wniosek

To tylko niektóre podstawowe przykłady. Możesz grać o wiele więcej z układami siatki CSS Flexbox, a są one absolutnie nieocenione, jeśli chcesz stworzyć responsywną stronę internetową.

Polecane artykuły

Oto kilka artykułów, które pomogą uzyskać bardziej szczegółowe informacje o właściwościach Flexbox, kodzie Flexbox, a także o siatce Flexbox css, więc po prostu przejdź przez link, który jest podany poniżej.

  1. HTML a XML - najważniejsze różnice
  2. CSS3 vs CSS - czym się różnią? (Infograph)
  3. Najważniejsze różnice między HTML a CSS
  4. HTML5 vs Flash

Kategoria:

Narzędzia programistyczne