Autor publikacji
Virtual Patriot - Administrator

flex-shrink

Data publikacji
Ostatnio edytowano

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

Informacje dodatkowe

brak

Informacje techniczne o właściwości flex-shrink

przeznaczenie

  • element dziecko elementu HTML typu flex, którego wartością właściwości flex-wrap jest wartość nowrap

  • element dziecko elementu HTML typu inline-flex, którego wartością właściwości flex-wrap jest wartość nowrap

pozycja

static, relative

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

Wyjaśnienie

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, jaki powstałby na osi głównej elementu rodzica wzdłuż anonimowego bloku, do którego należą dane elementy dzieci

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

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

      #flexbox > div {
        flex-basis:50%;
        padding:0.5em;
      }

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

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

      #flexbox > :nth-child(3) {
        flex-shrink: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>