Autor publikacji: Virtual Patriot - Administrator

flex-grow

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

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

Przeznaczenie właściwości `flex-grow`

Za pomocą właściwości flex-grow możemy określić proporcję rozrostu jednego z rozmiarów obszaru zawartości elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny.

Informacje dodatkowe: brak

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

przeznaczenie

element dziecko elementu HTML typu flex
element dziecko elementu HTML typu inline-flex

nie

0

brak

tak

Interpretacja właściwości `flex-grow`

: 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-grow.

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

liczba

Wyjaśnienie

Za pomocą właściwości flex-grow oraz dowolnej nieujemnej liczby możemy określić proporcję rozrostu jednego z rozmiarów obszaru zawartości elementów dzieci interesującego nas elementu HTML tworzącego układ elastyczny.

Wartość "0" oznacza brak możliwości rozrostu jednego z rozmiarów obszaru zawartości danego elementu dziecka.

Informacje dodatkowe

wspomniany rozrost dokonuje się względem oraz na podstawie rozmiaru wolnej przestrzeni, jaka pozostała na osi głównej elementu rodzica wzdłuż anonimowego bloku, do którego należą dane elementy dzieci

wspomniany rozrost dotyczy tego rozmiaru, który jest ułożony wzdłuż osi głównej elementu rodzica

Przykład

  flex-grow:1;
  flex-grow:2;
  flex-grow:1;

div - 1

div - 2

div - 3

Proporcja rozrostu rozmiaru szerokości obszaru zawartości kolejnych elementów dzieci przykładowego elementu "div#flexbox" wynosi "1:2:1", ponieważ do każdego ze wspomnianych elementów dzieci przykładowego elementu "div#flexbox" została dodana właściwość "flex-grow" 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:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

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

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

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

  <body>

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

  </body>
</html>