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ści wyświetlania się decyduje to, jaką kolejność w kodzie HTML zajmuje poszczególny element dziecko.

Przykład

  order:2;
  order:3;
  order:1;
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:#CBFFFF;
      }

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