Ostatnio edytowany:

flex-wrap

Autor: Virtual Patriot

Opis właściwości flex-wrap

Za pomocą właściwości flex-wrap możemy określić czy elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny mogą zostać umieszczone (gdy jest to konieczne) w kolejnym anonimowym bloku.

Dodatkowe techniczne informacje o właściwości flex-wrap

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

nowrap

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości flex-wrap

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie (interpretuje od wersji 11, lecz z wieloma możliwymi błędami)

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości flex-wrap

nowrap

Opis

Wartość nowrap jest domyślną wartością właściwości flex-wrap.

Domyślnie elementy dzieci elementu HTML tworzącego układ elastyczny umieszczone są w jednym anonimowym bloku.

Cechy wartości nowrap właściwości flex-wrap

  • element HTML tworzący układ elastyczny posiada tylko jeden anonimowym blok na swoją treść
  • początek oraz koniec osi poprzecznej elementu HTML tworzącego układ elastyczny nie zostają zamienione miejscami

Przykład

  flex-wrap:nowrap;
div - 1
div - 2
div - 3
div - 4

Elementy dzieci przykładowego elementu "div#flexbox" umieszczone są w wierszu jednego anonimowego bloku.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:50%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:25%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:40%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:30%;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
    </div>

  </body>
</html>

wrap

Opis

Za pomocą wartości wrap właściwości flex-wrap możemy sprawić, że elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny mogą zostać umieszczone (gdy jest to konieczne) w kolejnym anonimowym bloku.

Cechy wartości wrap właściwości flex-wrap

  • element HTML tworzący układ elastyczny może posiadać wiele anonimowych bloków na swoją treść
  • początek oraz koniec osi poprzecznej elementu HTML tworzącego układ elastyczny nie zostają zamienione miejscami

Przykład

  flex-wrap:wrap;
div - 1
div - 2
div - 3
div - 4

Elementy dzieci przykładowego elementu "div#flexbox", które nie mieszczą się w rozmiarze szerokości obszaru zawartości przykładowego elementu "div#flexbox" zostały umieszczone w wierszu kolejnego anonimowego bloku, ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "flex-wrap" wraz z wartością "wrap".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:50%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:25%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:40%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:30%;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
    </div>

  </body>
</html>

wrap-reverse

Opis

Za pomocą wartości wrap-reverse właściwości flex-wrap możemy sprawić, że elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny mogą zostać umieszczone (gdy jest to konieczne) w odwrotnej kolejności w kolejnym anonimowym bloku.

Cechy wartości wrap-reverse właściwości flex-wrap

  • element HTML tworzący układ elastyczny może posiadać wiele anonimowych bloków na swoją treść
  • początek oraz koniec osi poprzecznej elementu HTML tworzącego układ elastyczny zostają zamienione miejscami

Przykład

  flex-wrap:wrap-reverse;
div - 3
div - 4
div - 1
div - 2

Elementy dzieci przykładowego elementu "div#flexbox", które nie mieszczą się w rozmiarze szerokości obszaru zawartości przykładowego elementu "div#flexbox" zostały umieszczone w odwrotnej kolejności w wierszu kolejnego anonimowego bloku, ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "flex-wrap" wraz z wartością "wrap-reverse".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      #flexbox {
        display:flex;
        flex-wrap:wrap-reverse;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:50%;
        background-color:red;
      }

      #flexbox > :nth-child(2) {
        flex-basis:25%;
        background-color:orange;
      }

      #flexbox > :nth-child(3) {
        flex-basis:40%;
        background-color:yellow;
      }

      #flexbox > :nth-child(4) {
        flex-basis:30%;
        background-color:pink;
      }
    </style>
  </head>

  <body>

    <div id="flexbox">
      <div>div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
      <div>div - 4</div>
    </div>

  </body>
</html>