Własność CSS flex-wrap

> Dodaj do ulubionych

Własność CSS flex-wrap określa, czy treść kontenera flex ma być układana w całości w jednym rzędzie, czy w razie potrzeby może być podzielona na kilka rzędów, oraz ewentualnie kierunek układania tych rzędów.

Wartości i składnia

Własność flex-wrap jako wartość przyjmuje jedno z następujących słów kluczowych:

nowrap
Zawartość kontenera flex jest układana w jednym rzędzie. Jeśli się w nim nie zmieści, to wyjdzie poza jego granice.
wrap
Zwartość kontenera flex jest układana w wielu rzędach, co pozwala zapobiec ewentualnemu wyjściu treści poza jego granice.
wrap-reverse
To samo, co wrap, tylko w odwrotnej kolejności.

Przykłady

Spójrz na poniższy prosty fragment dokumentu HTML.


<body>
  <div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</body>>

Poniższe reguły CSS zamieniają nadrzędny kontener div w kontener flex oraz ustawiają jego zawartość w pionowych rzędach w odwrotnej kolejności.

body > div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
  width: 500px;
  height: 200px;
  padding: 15px;
  border: 1px dashed black;
}

div > div {
  padding: 20px 40px;
  margin: 5px;
  border: 1px solid black;
  font-size: 30px;
}

Efekt:

Efekt zastosowania własności flex-wrap: wrap-reverse

Podsumowanie

ZastosowanieKontenery flex
Obsługiwane wartościSłowa kluczowe nowrap, wrap i wrap-reverse
Wartość początkowanowrap
DziedziczenieNie
Specyfikacja CSSCSS Flexible Box Layout Module Level 1, flex-wrap
Jajko z dzwonkiem

Podoba Ci się ta strona?

Pomóż nam się rozwijać, wykupując płatne konto. Dzięki temu będziemy mogli tworzyć dla Ciebie jeszcze więcej ciekawych treści, a Ty pozbędziesz się reklam.