Kurs HTML

Aktywacja Kontekstu Formatowania Flex

Aby zacząć używać modelu Flexbox, musimy najpierw poinstruować przeglądarkę, że dany element ma stać się **kontenerem flex**. Robimy to za pomocą właściwości display, nadając jej jedną z dwóch wartości: flex lub inline-flex.

Ustawienie display: flex lub display: inline-flex na elemencie nadrzędnym (kontenerze) powoduje, że jego bezpośrednie dzieci stają się **elementami flex** i zaczynają być układane zgodnie z regułami Flexboxa.

display: flex

Ustawienie display: flex sprawia, że element zachowuje się jak **element blokowy** (podobnie jak display: block) w kontekście otaczających go elementów, ale jego wewnętrzny układ (dzieci) jest zarządzany przez Flexbox.

• Kontener zajmuje całą dostępną szerokość w swoim rodzicu (chyba że ma zdefiniowaną szerokość).
• Następne elementy w przepływie dokumentu pojawią się pod kontenerem flex.
• Dzieci kontenera (elementy flex) domyślnie układają się w wierszu.

<p>Tekst przed kontenerem.</p>
<div class="flex-container-block">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>
<p>Tekst po kontenerze.</p>Kopiuj

.flex-container-block {
  display: flex; /* Zachowuje się jak blok na zewnątrz */
  border: 2px solid blue;
  padding: 10px;
  margin-bottom: 10px; /* Odstęp od tekstu poniżej */
}

.flex-item {
  background-color: lightblue;
  padding: 20px;
  margin: 5px;
  border: 1px solid navy;
}
Kopiuj

W tym przykładzie, div.flex-container-block zajmie całą dostępną szerokość, a tekst "Tekst po kontenerze." pojawi się pod nim. Elementy 1, 2, 3 ułożą się wewnątrz w jednym wierszu.

display: inline-flex

Ustawienie display: inline-flex sprawia, że element zachowuje się jak **element liniowo-blokowy** (podobnie jak display: inline-block) w kontekście otaczających go elementów, ale jego wewnętrzny układ (dzieci) jest zarządzany przez Flexbox.

• Szerokość kontenera dopasowuje się do jego zawartości (chyba że ma zdefiniowaną szerokość).
• Kontener układa się w jednej linii z otaczającymi go elementami (np. tekstem), pozwalając na opływanie.
• Dzieci kontenera (elementy flex) domyślnie układają się w wierszu.

<p>Tekst przed <span class="flex-container-inline">
  <span class="flex-item">A</span>
  <span class="flex-item">B</span>
  <span class="flex-item">C</span>
</span> tekst po kontenerze.</p>Kopiuj

.flex-container-inline {
  display: inline-flex; /* Zachowuje się jak inline-block na zewnątrz */
  border: 2px solid green;
  padding: 5px;
  vertical-align: middle; /* Opcjonalnie: wyrównanie pionowe z tekstem */
}

/* Style .flex-item jak poprzednio */
.flex-item {
  background-color: lightgreen;
  padding: 10px;
  margin: 3px;
  border: 1px solid darkgreen;
}
Kopiuj

W tym przykładzie, span.flex-container-inline będzie miał szerokość dopasowaną do elementów A, B, C i pojawi się w tej samej linii co otaczający go tekst. Elementy A, B, C ułożą się wewnątrz w jednym wierszu.

Kluczowa różnica: Zachowanie zewnętrzne

Podstawowa różnica między display: flex a display: inline-flex leży w tym, jak sam **kontener** jest traktowany w przepływie dokumentu:

• flex: Kontener jest elementem blokowym.
• inline-flex: Kontener jest elementem liniowo-blokowym.

Wybór między nimi zależy od tego, czy chcesz, aby kontener zajmował całą linię (flex), czy też ma być częścią linii tekstu lub układać się obok innych elementów liniowych (inline-flex).

Ważne: Niezależnie od tego, czy użyjesz flex czy inline-flex, sposób, w jaki **elementy wewnątrz kontenera** (elementy flex) są układane za pomocą właściwości Flexboxa (np. flex-direction, justify-content, align-items), jest **identyczny**.