Source

Przewód

Szybko zarządzaj układem, wyrównaniem i rozmiarami kolumn siatki, nawigacji, komponentów i nie tylko dzięki pełnemu zestawowi responsywnych narzędzi Flexbox. W przypadku bardziej złożonych implementacji może być konieczne niestandardowe CSS.

Włącz elastyczne zachowania

Zastosuj displaynarzędzia, aby utworzyć kontener flexbox i przekształcić bezpośrednie elementy potomne w elementy flex. Elastyczne pojemniki i przedmioty można dalej modyfikować za pomocą dodatkowych właściwości elastycznych.

Jestem kontenerem flexbox!
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
Jestem wbudowanym kontenerem flexbox!
<div class="d-inline-flex p-2 bd-highlight">I'm an inline flexbox container!</div>

Odmiany responsywne istnieją również dla .d-flexi .d-inline-flex.

  • .d-flex
  • .d-inline-flex
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-flex
  • .d-xl-inline-flex

Kierunek

Ustaw kierunek elementów elastycznych w kontenerze elastycznym za pomocą narzędzi kierunkowych. W większości przypadków możesz pominąć tutaj klasę poziomą, ponieważ domyślna przeglądarka to row. Możesz jednak napotkać sytuacje, w których musisz jawnie ustawić tę wartość (np. Układy responsywne).

Użyj .flex-row, aby ustawić kierunek poziomy (domyślny w przeglądarce) lub .flex-row-reverserozpocząć kierunek poziomy od przeciwnej strony.

Wygiąć element 1
Elastyczny element 2
Elastyczny element 3
Wygiąć element 1
Elastyczny element 2
Elastyczny element 3
<div class="d-flex flex-row bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Użyj .flex-column, aby ustawić kierunek pionowy lub .flex-column-reverserozpocząć kierunek pionowy od przeciwnej strony.

Wygiąć element 1
Elastyczny element 2
Elastyczny element 3
Wygiąć element 1
Elastyczny element 2
Elastyczny element 3
<div class="d-flex flex-column bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse bd-highlight">
  <div class="p-2 bd-highlight">Flex item 1</div>
  <div class="p-2 bd-highlight">Flex item 2</div>
  <div class="p-2 bd-highlight">Flex item 3</div>
</div>

Odmiany responsywne istnieją również dla flex-direction.

  • .flex-row
  • .flex-row-reverse
  • .flex-column
  • .flex-column-reverse
  • .flex-sm-row
  • .flex-sm-row-reverse
  • .flex-sm-column
  • .flex-sm-column-reverse
  • .flex-md-row
  • .flex-md-row-reverse
  • .flex-md-column
  • .flex-md-column-reverse
  • .flex-lg-row
  • .flex-lg-row-reverse
  • .flex-lg-column
  • .flex-lg-column-reverse
  • .flex-xl-row
  • .flex-xl-row-reverse
  • .flex-xl-column
  • .flex-xl-column-reverse

Uzasadnij treść

Użyj justify-contentnarzędzi na kontenerach flexbox, aby zmienić wyrównanie elementów flex na głównej osi (oś x do początku, oś y, jeśli flex-direction: column). Wybierz spośród start(domyślnie przeglądarki), end, center, betweenlub around.

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Odmiany responsywne istnieją również dla justify-content.

  • .justify-content-start
  • .justify-content-end
  • .justify-content-center
  • .justify-content-between
  • .justify-content-around
  • .justify-content-sm-start
  • .justify-content-sm-end
  • .justify-content-sm-center
  • .justify-content-sm-between
  • .justify-content-sm-around
  • .justify-content-md-start
  • .justify-content-md-end
  • .justify-content-md-center
  • .justify-content-md-between
  • .justify-content-md-around
  • .justify-content-lg-start
  • .justify-content-lg-end
  • .justify-content-lg-center
  • .justify-content-lg-between
  • .justify-content-lg-around
  • .justify-content-xl-start
  • .justify-content-xl-end
  • .justify-content-xl-center
  • .justify-content-xl-between
  • .justify-content-xl-around

Wyrównaj przedmioty

Użyj align-itemsnarzędzi na kontenerach flexbox, aby zmienić wyrównanie elementów elastycznych na osi poprzecznej (oś y do początku, oś x, jeśli flex-direction: column). Wybierz spośród start, end, center, baselinelub stretch(domyślna przeglądarka).

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Odmiany responsywne istnieją również dla align-items.

  • .align-items-start
  • .align-items-end
  • .align-items-center
  • .align-items-baseline
  • .align-items-stretch
  • .align-items-sm-start
  • .align-items-sm-end
  • .align-items-sm-center
  • .align-items-sm-baseline
  • .align-items-sm-stretch
  • .align-items-md-start
  • .align-items-md-end
  • .align-items-md-center
  • .align-items-md-baseline
  • .align-items-md-stretch
  • .align-items-lg-start
  • .align-items-lg-end
  • .align-items-lg-center
  • .align-items-lg-baseline
  • .align-items-lg-stretch
  • .align-items-xl-start
  • .align-items-xl-end
  • .align-items-xl-center
  • .align-items-xl-baseline
  • .align-items-xl-stretch

Wyrównaj siebie

Użyj align-selfnarzędzi na elementach flexbox, aby indywidualnie zmienić ich wyrównanie na osi poprzecznej (oś y do początku, oś x, jeśli flex-direction: column). Wybierz jedną z tych samych opcji, co align-items: start, end, center, baselinelub stretch(domyślna przeglądarka).

Element elastyczny
Wyrównany element elastyczny
Element elastyczny
Element elastyczny
Wyrównany element elastyczny
Element elastyczny
Element elastyczny
Wyrównany element elastyczny
Element elastyczny
Element elastyczny
Wyrównany element elastyczny
Element elastyczny
Element elastyczny
Wyrównany element elastyczny
Element elastyczny
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>

Odmiany responsywne istnieją również dla align-self.

  • .align-self-start
  • .align-self-end
  • .align-self-center
  • .align-self-baseline
  • .align-self-stretch
  • .align-self-sm-start
  • .align-self-sm-end
  • .align-self-sm-center
  • .align-self-sm-baseline
  • .align-self-sm-stretch
  • .align-self-md-start
  • .align-self-md-end
  • .align-self-md-center
  • .align-self-md-baseline
  • .align-self-md-stretch
  • .align-self-lg-start
  • .align-self-lg-end
  • .align-self-lg-center
  • .align-self-lg-baseline
  • .align-self-lg-stretch
  • .align-self-xl-start
  • .align-self-xl-end
  • .align-self-xl-center
  • .align-self-xl-baseline
  • .align-self-xl-stretch

Wypełnić

Użyj .flex-fillklasy na szeregu elementów rodzeństwa, aby zmusić je do równej szerokości, jednocześnie zajmując całą dostępną przestrzeń poziomą. Szczególnie przydatne do nawigacji o równej szerokości lub uzasadnionej.

Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex bd-highlight">
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
  <div class="p-2 flex-fill bd-highlight">Flex item</div>
</div>

Odmiany responsywne istnieją również dla flex-fill.

  • .flex-fill
  • .flex-sm-fill
  • .flex-md-fill
  • .flex-lg-fill
  • .flex-xl-fill

Rosną i kurczą się

Użyj .flex-grow-*narzędzi, aby przełączyć zdolność elastycznego elementu do powiększania się, aby wypełnić dostępną przestrzeń. W poniższym przykładzie .flex-grow-1elementy wykorzystują całą dostępną przestrzeń, jaką mogą, pozostawiając pozostałym dwóm elementom elastycznym ich niezbędną przestrzeń.

Element elastyczny
Element elastyczny
Trzeci element elastyczny
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Third flex item</div>
</div>

Użyj .flex-shrink-*narzędzi, aby w razie potrzeby przełączyć zdolność elementu elastycznego do zmniejszania. W poniższym przykładzie drugi element flex z .flex-shrink-1jest zmuszony do zawinięcia swojej zawartości do nowej linii, „kurcząc się”, aby zapewnić więcej miejsca dla poprzedniego elementu flex z .w-100.

Element elastyczny
Element elastyczny
<div class="d-flex bd-highlight">
  <div class="p-2 w-100 bd-highlight">Flex item</div>
  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
</div>

Odmiany responsywne istnieją również dla flex-growi flex-shrink.

  • .flex-{grow|shrink}-0
  • .flex-{grow|shrink}-1
  • .flex-sm-{grow|shrink}-0
  • .flex-sm-{grow|shrink}-1
  • .flex-md-{grow|shrink}-0
  • .flex-md-{grow|shrink}-1
  • .flex-lg-{grow|shrink}-0
  • .flex-lg-{grow|shrink}-1
  • .flex-xl-{grow|shrink}-0
  • .flex-xl-{grow|shrink}-1

Marże automatyczne

Flexbox może zrobić kilka niesamowitych rzeczy, gdy połączysz elastyczne wyrównanie z automatycznymi marginesami. Poniżej pokazano trzy przykłady kontrolowania elementów elastycznych za pomocą automatycznych marginesów: domyślne (brak automatycznego marginesu), przesuwanie dwóch elementów w prawo ( .mr-auto) i przesuwanie dwóch elementów w lewo ( .ml-auto).

Niestety IE10 i IE11 nie obsługują poprawnie automatycznych marginesów na elementach flex, których rodzic ma justify-contentwartość inną niż domyślna. Zobacz tę odpowiedź StackOverflow , aby uzyskać więcej informacji.

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="mr-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex bd-highlight mb-3">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="ml-auto p-2 bd-highlight">Flex item</div>
</div>

Z wyrównaniem elementów

Przenieś w pionie jeden element flex na górę lub dół kontenera, mieszając align-items, flex-direction: columni margin-top: autolub margin-bottom: auto.

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="mb-auto p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
</div>

<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="p-2 bd-highlight">Flex item</div>
  <div class="mt-auto p-2 bd-highlight">Flex item</div>
</div>

Zawinąć

Zmień sposób zawijania elementów elastycznych w kontenerze elastycznym. Wybierz opcję braku zawijania (domyślne ustawienie przeglądarki) za pomocą .flex-nowrap, zawijania za pomocą .flex-wraplub odwrotnego zawijania za pomocą .flex-wrap-reverse.

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex flex-nowrap">
  ...
</div>
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex flex-wrap">
  ...
</div>
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex flex-wrap-reverse">
  ...
</div>

Odmiany responsywne istnieją również dla flex-wrap.

  • .flex-nowrap
  • .flex-wrap
  • .flex-wrap-reverse
  • .flex-sm-nowrap
  • .flex-sm-wrap
  • .flex-sm-wrap-reverse
  • .flex-md-nowrap
  • .flex-md-wrap
  • .flex-md-wrap-reverse
  • .flex-lg-nowrap
  • .flex-lg-wrap
  • .flex-lg-wrap-reverse
  • .flex-xl-nowrap
  • .flex-xl-wrap
  • .flex-xl-wrap-reverse

Zamówienie

Zmień wizualną kolejność określonych elementów elastycznych za pomocą kilku ordernarzędzi. Zapewniamy tylko opcje dodawania przedmiotu jako pierwszego lub ostatniego, a także resetowania w celu użycia zamówienia DOM. Jak orderprzyjmuje dowolną wartość całkowitą (np. 5), dodaj niestandardowy CSS dla wszelkich dodatkowych potrzebnych wartości.

Pierwsza elastyczna pozycja
Drugi element elastyczny
Trzeci element elastyczny
<div class="d-flex flex-nowrap bd-highlight">
  <div class="order-3 p-2 bd-highlight">First flex item</div>
  <div class="order-2 p-2 bd-highlight">Second flex item</div>
  <div class="order-1 p-2 bd-highlight">Third flex item</div>
</div>

Odmiany responsywne istnieją również dla order.

  • .order-0
  • .order-1
  • .order-2
  • .order-3
  • .order-4
  • .order-5
  • .order-6
  • .order-7
  • .order-8
  • .order-9
  • .order-10
  • .order-11
  • .order-12
  • .order-sm-0
  • .order-sm-1
  • .order-sm-2
  • .order-sm-3
  • .order-sm-4
  • .order-sm-5
  • .order-sm-6
  • .order-sm-7
  • .order-sm-8
  • .order-sm-9
  • .order-sm-10
  • .order-sm-11
  • .order-sm-12
  • .order-md-0
  • .order-md-1
  • .order-md-2
  • .order-md-3
  • .order-md-4
  • .order-md-5
  • .order-md-6
  • .order-md-7
  • .order-md-8
  • .order-md-9
  • .order-md-10
  • .order-md-11
  • .order-md-12
  • .order-lg-0
  • .order-lg-1
  • .order-lg-2
  • .order-lg-3
  • .order-lg-4
  • .order-lg-5
  • .order-lg-6
  • .order-lg-7
  • .order-lg-8
  • .order-lg-9
  • .order-lg-10
  • .order-lg-11
  • .order-lg-12
  • .order-xl-0
  • .order-xl-1
  • .order-xl-2
  • .order-xl-3
  • .order-xl-4
  • .order-xl-5
  • .order-xl-6
  • .order-xl-7
  • .order-xl-8
  • .order-xl-9
  • .order-xl-10
  • .order-xl-11
  • .order-xl-12

Wyrównaj zawartość

Użyj align-contentnarzędzi na kontenerach flexbox, aby wyrównać elementy flex razem na osi poprzecznej. Wybierz spośród start(domyślnie przeglądarki), end, center, between, aroundlub stretch. Aby zademonstrować te narzędzia, wymusiliśmy flex-wrap: wrapi zwiększyliśmy liczbę elementów elastycznych.

Heads-up! Ta właściwość nie ma wpływu na pojedyncze wiersze elementów flex.

Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex align-content-start flex-wrap">
  ...
</div>
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex align-content-end flex-wrap">...</div>
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex align-content-center flex-wrap">...</div>
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex align-content-between flex-wrap">...</div>
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex align-content-around flex-wrap">...</div>
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
Element elastyczny
<div class="d-flex align-content-stretch flex-wrap">...</div>

Odmiany responsywne istnieją również dla align-content.

  • .align-content-start
  • .align-content-end
  • .align-content-center
  • .align-content-around
  • .align-content-stretch
  • .align-content-sm-start
  • .align-content-sm-end
  • .align-content-sm-center
  • .align-content-sm-around
  • .align-content-sm-stretch
  • .align-content-md-start
  • .align-content-md-end
  • .align-content-md-center
  • .align-content-md-around
  • .align-content-md-stretch
  • .align-content-lg-start
  • .align-content-lg-end
  • .align-content-lg-center
  • .align-content-lg-around
  • .align-content-lg-stretch
  • .align-content-xl-start
  • .align-content-xl-end
  • .align-content-xl-center
  • .align-content-xl-around
  • .align-content-xl-stretch