Ostatnio edytowany:

flex

Autor: Virtual Patriot

Opis właściwości flex

Za pomocą właściwości flex możemy określić kilka różnych cech elastyczności obszaru zawartości kolejnych elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny.

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

przeznaczenie
pozycja

static, relative

dziedziczenie

nie

wartość initial

0 1 auto

wyjątki initial

brak

animowanie

tak samo jak dla poszczególnej właściwości CSS, której wartość tworzy poszczególny składnik grupy wartości właściwości flex

Interpretacja właściwości flex

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

grupa wartości

Opis

Za pomocą właściwości flex oraz z góry zdefiniowanej grupy wartości możemy określić kilka różnych cech elastyczności obszaru zawartości kolejnych elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny.

/* OBIE REGUŁY CSS SĄ SOBIE RÓWNOZNACZNE */

/* REGUŁA - 1 */
div {
  flex:2 1.5 35%;
}

/* REGUŁA - 2 */
div {
  flex-grow:2;
  flex-shrink:1.5;
  flex-basis:35%;
}

Składniki grupy wartości właściwości flex

Ważne

pierwsza napotkana w naszym zapisie wartość liczbowa zawsze będzie odpowiadała za wartość składnika grow

druga napotkana w naszym zapisie wartość liczbowa zawsze będzie odpowiadała za wartość składnika shrink

podana przez nas grupa wartości właściwości flex nie może zawierać wartości globalnych

Przykładowe zapisy

1

1 2

1 2 0

1 2 100px

1 100px

1 0px

grow

Składnik grow nie jest wymaganym składnikiem grupy wartości właściwości flex. Składnik grow określa wartość właściwości flex-grow, czyli proporcję rozrostu jednego z rozmiarów obszaru zawartości interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny.

Wartość domyślna

1

shrink

Składnik shrink nie jest wymaganym składnikiem grupy wartości właściwości flex. Składnik shrink określa wartość właściwości flex-shrink, czyli proporcję kurczenia się jednego z rozmiarów obszaru zawartości interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny.

Wartość domyślna

1

basis

Składnik basis nie jest wymaganym składnikiem grupy wartości właściwości flex. Składnik basis określa wartość właściwości flex-basis, czyli rozmiar główny obszaru zawartości interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny.

Wartość domyślna

0

Przykład

  flex:1 0 30%;
  flex:2 0 20%;
  flex:3 0 10%;
div - 1
div - 2
div - 3

Każdy z elementów dzieci przykładowego elementu "div#flexbox" posiada własne indywidualne cechy elastyczności obszaru zawartości, ponieważ do każdego ze wspomnianych elementów dzieci przykładowego elementu "div#flexbox" została dodana właściwość "flex" wraz z odpowiednią grupą 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:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

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

  <body>

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

  </body>
</html>

none

Opis

Za pomocą wartości none właściwości flex możemy sprawić, że do interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny zostanie dodana właściwość flex wraz z grupą wartości 0 0 auto.