Ostatnio edytowany:

flex-grow

Autor: Virtual Patriot

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

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

przeznaczenie
  • element dziecko elementu HTML typu flex
  • element dziecko elementu HTML typu inline-flex
pozycja

static, relative

dziedziczenie

nie

wartość initial

0

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości flex-grow

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

liczba

Opis

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.

Aby określić maksymalny możliwy rozmiar szerokości, do którego może rozrosnąć się rozmiar szerokości obszaru zawartości danego elementu dziecka, wtedy należy skorzystać z właściwości max-width.

Aby określić maksymalny możliwy rozmiar wysokości, do którego może rozrosnąć się rozmiar wysokości obszaru zawartości danego elementu dziecka, wtedy należy skorzystać z właściwości max-height.

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

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