Ostatnio edytowany:

order

Autor: Virtual Patriot

Opis właściwości order

Za pomocą właściwości order możemy określić kolejność wyświetlania się elementów dzieci interesującego nas elementu HTML. Mowa tu o elementach dzieciach elementu HTML tworzącego układ elastyczny.

Dodatkowe techniczne informacje o właściwości order

przeznaczenie
  • element dziecko elementu HTML typu flex
  • element dziecko elementu HTML typu inline-flex
dziedziczenie
  • nie
wartość initial
  • 0
wyjątki initial
  • brak
animowanie
  • tak

Interpretacja właściwości order

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 order

liczba całkowita

Opis

Za pomocą właściwości order oraz dowolnej liczby całkowitej możemy określić kolejność wyświetlania się elementów dzieci interesującego nas elementu HTML (im mniejsza liczba całkowita tym element dziecko zostanie wyświetlony wcześniej).

W przypadku posiadania tej samej wartości właściwości "order" przez dwa lub więcej elementy dzieci, wtedy o wspomnianej kolejność wyświetlania się decyduje to, jaką kolejność w kodzie HTML zajmuje poszczególny element dziecko.

Przykład

div - 1
div - 2
div - 3

Kolejność wyświetlania się elementów dzieci przykładowego elementu "div#flexbox" została zmieniona, ponieważ do każdego ze wspomnianych elementów dzieci przykładowego elementu "div#flexbox" została dodana właściwość "order" wraz z odpowiednią wartością.

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:0.5em;
        font-size:1.3em;
        background-color:#AFF;
      }

      #flexbox > div {
        margin:1px;
        padding:0.5em;
        background-color:#5DD;
      }

      #flexbox > :nth-child(1) {
        order:2;
      }

      #flexbox > :nth-child(2) {
        order:3;
      }

      #flexbox > :nth-child(3) {
        order:1;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>