Ostatnio edytowany:

flex-direction

Autor: Virtual Patriot

Opis właściwości flex-direction

Za pomocą właściwości flex-direction możemy określić kierunek układania się kolejnych elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny.

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

przeznaczenie
pozycja

dowolna

dziedziczenie

nie

wartość initial

row

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości flex-direction

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-direction

row

Opis

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

Domyślnie elementy dzieci elementu HTML tworzącego układ elastyczny posiadają wierszowy kierunek układania się.

Cechy wartości row właściwości flex-direction

  • układanie elementów dzieci elementu HTML tworzącego układ elastyczny rozpoczyna się od początkowej krawędzi liniowej elementu rodzica
  • elementy dzieci elementu HTML tworzącego układ elastyczny przylegają do początkowej krawędzi blokowej elementu rodzica
  • osią główną elementu HTML tworzącego układ elastyczny staje się oś wierszowa, która ma swój początek przy początkowej krawędzi liniowej elementu HTML, a koniec przy końcowej krawędzi liniowej elementu HTML
  • osią poprzeczną elementu HTML tworzącego układ elastyczny staje się oś kolumnowa, która ma swój początek przy początkowej krawędzi blokowej elementu HTML, a koniec przy końcowej krawędzi blokowej elementu HTML
  • elementy dzieci elementu HTML tworzącego układ elastyczny układają się jeden po drugim wzdłuż osi głównej wewnątrz jednego niewidocznego anonimowego bloku posiadającego wyłącznie jeden wiersz na swoją treść

Przykład

  flex-direction:row;
div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" posiadają wierszowy kierunek układania się.

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;
        height:250px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

row-reverse

Opis

Za pomocą wartości row-reverse właściwości flex-direction możemy sprawić, że elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny będą posiadały odwrócony wierszowy kierunek układania się.

Cechy wartości row-reverse właściwości flex-direction

  • układanie elementów dzieci elementu HTML tworzącego układ elastyczny rozpoczyna się od końcowej krawędzi liniowej elementu rodzica
  • elementy dzieci elementu HTML tworzącego układ elastyczny przylegają do początkowej krawędzi blokowej elementu rodzica
  • osią główną elementu HTML tworzącego układ elastyczny staje się oś wierszowa, która ma swój początek przy końcowej krawędzi liniowej elementu HTML, a koniec przy początkowej krawędzi liniowej elementu HTML
  • osią poprzeczną elementu HTML tworzącego układ elastyczny staje się oś kolumnowa, która ma swój początek przy początkowej krawędzi blokowej elementu HTML, a koniec przy końcowej krawędzi blokowej elementu HTML
  • elementy dzieci elementu HTML tworzącego układ elastyczny układają się jeden po drugim wzdłuż osi głównej wewnątrz jednego niewidocznego anonimowego bloku posiadającego wyłącznie jeden wiersz na swoją treść

Przykład

  flex-direction:row-reverse;
div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" posiadają odwrócony wierszowy kierunek układania się, ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "flex-direction" wraz z wartością "row-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-direction:row-reverse;
        height:250px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

column

Opis

Za pomocą wartości column właściwości flex-direction możemy sprawić, że elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny będą posiadały kolumnowy kierunek układania się.

Cechy wartości column właściwości flex-direction

  • układanie elementów dzieci elementu HTML tworzącego układ elastyczny rozpoczyna się od początkowej krawędzi blokowej elementu rodzica
  • elementy dzieci elementu HTML tworzącego układ elastyczny przylegają do początkowej krawędzi liniowej elementu rodzica
  • osią główną elementu HTML tworzącego układ elastyczny staje się oś kolumnowa, która ma swój początek przy początkowej krawędzi blokowej elementu HTML, a koniec przy końcowej krawędzi blokowej elementu HTML
  • osią poprzeczną elementu HTML tworzącego układ elastyczny staje się oś wierszowa, która ma swój początek przy początkowej krawędzi liniowej elementu HTML, a koniec przy końcowej krawędzi liniowej elementu HTML
  • elementy dzieci elementu HTML tworzącego układ elastyczny układają się jeden po drugim wzdłuż osi głównej wewnątrz jednego niewidocznego anonimowego bloku posiadającego wyłącznie jedną kolumnę na swoją treść

Przykład

  flex-direction:column;
div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" posiadają kolumnowy kierunek układania się, ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "flex-direction" wraz z wartością "column".

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-direction:column;
        height:250px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

column-reverse

Opis

Za pomocą wartości column-reverse właściwości flex-direction możemy sprawić, że elementy dzieci interesującego nas elementu HTML tworzącego układ elastyczny będą posiadały odwrócony kolumnowy kierunek układania się.

Cechy wartości column-reverse właściwości flex-direction

  • układanie elementów dzieci elementu HTML tworzącego układ elastyczny rozpoczyna się od końcowej krawędzi blokowej elementu rodzica
  • elementy dzieci elementu HTML tworzącego układ elastyczny przylegają do początkowej krawędzi liniowej elementu rodzica
  • osią główną elementu HTML tworzącego układ elastyczny staje się oś kolumnowa, która ma swój początek przy końcowej krawędzi blokowej elementu HTML, a koniec przy początkowej krawędzi blokowej elementu HTML
  • osią poprzeczną elementu HTML tworzącego układ elastyczny staje się oś wierszowa, która ma swój początek przy początkowej krawędzi liniowej elementu HTML, a koniec przy końcowej krawędzi liniowej elementu HTML
  • elementy dzieci elementu HTML tworzącego układ elastyczny układają się jeden po drugim wzdłuż osi głównej wewnątrz jednego niewidocznego anonimowego bloku posiadającego wyłącznie jedną kolumnę na swoją treść

Przykład

  flex-direction:column-reverse;
div - 1
div - 2
div - 3

Elementy dzieci przykładowego elementu "div#flexbox" posiadają odwrócony kolumnowy kierunek układania się, ponieważ do wspomnianego elementu "div#flexbox" została dodana właściwość "flex-direction" wraz z wartością "column-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-direction:column-reverse;
        height:250px;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        background-color:yellow;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>