Jak używać Flexbox w CSS?

Flexbox jako funkcja pojawiła się w CSS dość późno, bo dopiero w 2009 roku. Obecnie jest jednym z najważniejszych narzędzi używanych przez front-end developerów. Jej znajomość jest podstawą do projektowania nowoczesnych stron internetowych. Dowiedz się, jak używać flexbox i poznaj, jak działają jego właściwości w praktyce.
https://cms.pracuj.pl/content/uploads/2023/03/caspar-camille-rubin-0qvBNep1Y04-unsplash-1_Easy-Resize.com_-1024x682.jpg

W tym artykule

  • Flexbox to narzędzie powszechnie używane w CSS. Dowiedz się, jak działa.
  • Korzystanie z flexboxa zaczyna się od ustawienia wartości display kontenera na flex.
  • Flexbox może przyjąć kilka wartości, które modyfikują układ jego elementów.

Spis treści

  1. Co to jest flexbox w css?
  2. Ustawienie wartości display na flex
  3. Jak działa flexbox w css?
  4. Flex-direction
  5. Flex-wrap
  6. Flex–flow
  7. Flex justify-content
  8. Flex align-items
  9. Flex aling-content
  10. Gap
  11. Właściwości elementów potomnych (flex items, child elements)
  12. Flexbox w CSS – podsumowanie

Co to jest flexbox w css?

Co oznacza flex po polsku? Wszystko zależy od kontekstu, ale w przypadku flexboxa, ważny jest fakt, że jest to skrót od słowa flexible. Jego przekład jest już bardziej jednoznaczny. Flexible oznacza elastyczny, giętki. Box to z kolei wyraz powszechnie zakorzeniony w polskiej mowie i jak zapewne wiesz, oznacza pudełko, ale nie tylko. Często też słowo box rozumiane jest jako ograniczone pole, ale w przypadku flexboxa będzie to po prostu obszar na stronie www.

W ten sposób dochodzimy do definicji flexboxa, który w CSS odpowiada za podzielenie strony na obszary, czyli "elastyczne kontenery” (flex containers). W praktyce oznacza to, że zamieszczone w nim elementy mają w założeniu być automatycznie responsywne (zgodnie z responsive web design).

Ustawienie wartości display na flex

Jeśli chcesz zacząć korzystać z flexboxa, musisz zdefiniować w HTML-u jedną z sekcji strony (div) jako container:

<div class="container">

</div>

A następnie umieścić w nim kilka elementów, aby móc później sprawdzić efekty:

<div class="container">

    <div>a</div>

    <div>b</div>

    <div>c</div> 

</div>

Kolejnym krokiem jest ustawienie w CSS-ie wartości display na flex:

.container {

   display: flex

   }

Otrzymasz responsywny kontener z elementami a, b i c. Możesz oczywiście ustawić też .container.div takie jak background-color, padding, czy margin według własnych preferencji.

Jak działa flexbox w css?

Jeśli zależy Ci na tym, aby efektywnie używać flexboxa, potrzebna Ci będzie umiejętność korzystania z jego właściwości. Dzięki nim ustawisz jego elementy w pożądany sposób. Ich działanie poznasz w kolejnych akapitach. Ważne jest też poznanie właściwości elementów pochodnych (child elements, np. flex align-self).

Flex-direction

Właściwość flex-direction służy do ustawienia parametrów głównej osi, na której pojawiają się elementy. Może być ona pionowa (column) i pozioma (row). Domyślnie zwrócona jest w kierunku czytania (w świecie zachodnim – od prawej do lewej i od góry na dół). Dodając do ustawienia -reverse, odwrócisz jej kierunek.

.container {

   flex-direction: column |column–reverse|row|row-reverse;

   }

Flex-wrap

Domyślnym ustawieniem flax-wrap w flexboxie jest nowrap: elementy pozostają zawsze w jednej linii. Jego zamiana na wrap pozwala, by zawijały się one w dół, tworząc kolejne szeregi, zgodnie z szerokością okna przeglądarki lub ekranu urządzenia mobilnego. Wrap-reverse sprawia, że elementy zawijają się do góry.

.container {

   flex-wrap: nowrap| wrap | wrap-reverse;

   }

Flex-flow

Ta właściwość to połączenie dwóch poprzednich, więc można jej używać, żeby tworzyć krótszy kod, oddzielając obie ustawienia spacją:

.container {

   flex-flow: column wrap;

   }

Flex justify-content

Tej właściwości używa się do justowania elementów w kontenerze – podobnie jak robi się to z tekstami w dokumentach. Układają się one w zależności od wybranej wartości justify-content:

  • flex-start (domyślnie) – od początku jego osi;
  • flex-end – odwrotnie, czyli od jej końca;
  • start – w kierunku pisania;
  • end – odwrotnie do kierunku pisania;
  • left – u lewej krawędzi kontenera;
  • right – z jego prawej krawędzi;
  • center – na środku jego osi;
  • space-between – pierwszy na początku, a ostatni na końcu osi kontenera – pozostałe w równych odstępach pomiędzy nimi;
  • space-around – z równą przestrzenią otaczającą każdy element;
  • space-evenly – w równych od siebie i krawędzi kontenera odstępach.

Flex align-items

Ta właściwość działa podobnie do poprzedniej, ale dotyczy przeciwnej osi kontenera, gdy elementy tworzą jeden szereg. Niektóre możliwe do ustawienia wartości nazywają się i działają identycznie, ale są też dwa, których nie ma w justify-content. Domyślny stretch sprawia, że elementy rozciągają się, by wypełnić oś. Działanie baseline może być nieco trudniejsze do zrozumienia. Elementy wyrównują się tutaj wzdłuż „linii pisma” (baseline) swojej zawartości, czyli osi, na której znajduje się tekst w nich umieszczony.

Flex align-content

Flex align-content przyjmuje takie same wartości jak poprzednie dwie właściwości, ale ma zastosowanie, kiedy elementy kontenera tworzą więcej niż jedną linię (flex-wrap ustawiony na wrap lub wrap-reverse). Definiuje ich ustawienie względem siebie podobnie jak justify-content, ale wzdłuż pionowej osi.

Gap

Właściwość gap umożliwia precyzyjną kontrolę nad minimalną wielkością przestrzeni pomiędzy elementami w kontenerze. Odstęp, jaki mogą mieć od siebie, podawany jest w pikselach (px). W praktyce użycie właściwości wygląda tak:

.container {

   display:flex;

.

.

.

   column-gap: 10px ; // odstęp wzdłuż osi pionowej//

   row-gap: 10px;        //  odstęp wzdłuż osi poziomej//

   gap: 10px;               //  odstęp wzdłuż obu osi naraz//

   gap: 10px 20px;     //  pierwsza wartość dotyczy osi poziomej, druga pionowej//

   }

Właściwości elementów potomnych (flex items, child elements)

Wszystkie elementy, które umieścisz w flexboxie, automatycznie stają się wobec niego potomne. Im również można przypisać właściwości, jakie staną się uzupełnieniem dla tych związanych z macierzystym kontenerem:

  • order – określa kolejność, w jakiej element pojawia się we flexboxie;
  • align-self – nadpisuje macierzystą właściwość align-items (np. flex-start) dla elementu;
  • flex-grow – określa, jaki rozmiar może przyjąć element w proporcji do pozostałych (np. ustawiony na 2, sprawi, że będzie mógł być dwukrotnie większy);
  • flex-shrink – właściwość odwrotna do flex-grow, przyjmując wartość 2, element będzie mógł być dwukrotnie mniejszy od pozostałych;
  • flex-basis – określa domyślny rozmiar elementu, przyjmując zarówno jednostki rem, %, jak i słowa kluczowe – nie jest to intuicyjnie działająca właściwość, dlatego warto z nią dłużej poćwiczyć, aby przekonać się jak dokładnie działa;
  • flex – shorthand dla trzech powyższych właściwości.

Flexbox w CSS – podsumowanie

Biegłe opanowanie flexboxa to jedna z podstaw do projektowania responsywnych stron internetowych. Przyjmuje wiele właściwości, a do tego musisz nauczyć się jeszcze tego, jak działają one razem z ustawieniami elementów potomnych. Warto spędzić na ćwiczeniach z flexboxem dużo czasu, bo w przyszłości znacznie przyspieszy to Twoją pracę.

Przeczytaj również

Dzień pracy frontend developera

Frontend developer – jakie ma możliwości rozwoju?

Co musi umieć początkujący fronted developer?

the:protocol © 2023 Grupa Pracuj S.A.