Ostatnio edytowany:

flex-shrink

Autor: Virtual Patriot

Opis właściwości flex-shrink

Za pomocą właściwości flex-shrink możemy określić proporcję kurczenia się 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-shrink

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

nie

wartość initial

1

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości flex-shrink

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

liczba

Opis

Za pomocą właściwości flex-shrink oraz dowolnej nieujemnej liczby możemy określić proporcję kurczenia się 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 kurczenia się jednego z rozmiarów obszaru zawartości danego elementu dziecka.

Informacje dodatkowe

wspomniane kurczenie dokonuje się względem oraz na podstawie nadmiaru rozmiaru szerokości, jaki powstałby w danym wierszu lub względem oraz na podstawie nadmiaru rozmiaru wysokości, jaki powstałby w danej kolumnie

wspomniane kurczenie nie może spowodować tego, aby posiadana przez dany element dziecko treść do wyświetlenia nie mieściła się w rozmiarze obszaru zawartości danego elementu dziecka

gdy elementy dzieci posiadają wierszowy kierunek układania się, wtedy mowa tu o kurczeniu się rozmiaru szerokości obszaru zawartości

gdy elementy dzieci posiadają kolumnowy kierunek układania się, wtedy mowa tu o kurczeniu się rozmiaru wysokości obszaru zawartości

Przykład

  flex-shrink:1;
  flex-shrink:2;
  flex-shrink:1;
div - 1
div - 2
div - 3

Proporcja kurczenia się 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-shrink" 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:0.5em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

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

      #flexbox > :nth-child(1) {
        flex-shrink:1;
      }

      #flexbox > :nth-child(2) {
        flex-shrink:2;
      }

      #flexbox > :nth-child(3) {
        flex-shrink:1;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>