Autor publikacji: Virtual Patriot - Administrator

flex

Data publikacji: Wrzesień 01 2013
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - flex property (LV1)

Przeznaczenie 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.

Informacje dodatkowe: brak

Informacje techniczne o właściwości `flex`

przeznaczenie

element dziecko elementu HTML typu flex (dla składnika shrink element dziecko elementu HTML typu flex posiadającego właściwość flex-wrap wraz z wartością nowrap)
element dziecko elementu HTML typu inline-flex (dla składnika shrink element dziecko elementu HTML typu inline-flex posiadającego właściwość flex-wrap wraz z wartością nowrap)

nie

0 1 auto

brak

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`

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

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

Opis wartości właściwości `flex`

grupa wartości

Wyjaśnienie

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`

            grow shrink basis

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.

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.

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.

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:#7DCDE8;
      }

      #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

Wyjaśnienie

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.