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
  • element dziecko elementu HTML typu flex
  • element dziecko elementu HTML typu inline-flex
dziedziczenie
  • nie
wartość initial
  • 1 0 auto
wyjątki initial
  • brak
animowanie
  • tak

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 bazowy obszaru zawartości interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny.

Wartość domyślna

0

Przykład

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

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

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

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

      #flexbox > :nth-child(3) {
        flex:3 0 10%;
      }
    </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.