Ostatnio edytowany:

flex-basis

Autor: Virtual Patriot

Opis właściwości flex-basis

Za pomocą właściwości flex-basis możemy określić rozmiar bazowy obszaru zawartości interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny.

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

przeznaczenie
  • element dziecko elementu HTML typu flex
  • element dziecko elementu HTML typu inline-flex
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • tak

Interpretacja właściwości flex-basis

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

auto

Opis

Wartość auto jest domyślną wartością właściwości flex-basis.

Domyślnie rozmiar bazowy obszaru zawartości elementu dziecka elementu HTML tworzącego układ elastyczny jest uzależniony od wartości właściwości width, jaką posiada dany element dziecko lub od wartości właściwości height, jaką posiada dany element dziecko.

Gdy dany element dziecko posiada wierszowy kierunek układania się, wtedy mowa tu o wartości właściwości width oraz o rozmiarze szerokości obszaru zawartości, natomiast gdy dany element dziecko posiada kolumnowy kierunek układania się, wtedy mowa tu o wartości właściwości height oraz o rozmiarze wysokości obszaru zawartości.

Przykład

div - 1
div - 2
div - 3

Rozmiar bazowy (w tym wypadku rozmiar szerokości) obszaru zawartości pierwszego elementu dziecka przykładowego elementu "div#flexbox" wynosi 200 pikseli, ponieważ domyślnie wspomniany pierwszy element dziecko przykładowego elementu "div#flexbox" posiada właściwość "flex-basis" wraz z wartością "auto" oraz dodatkowo do wspomnianego pierwszego elementu dziecka przykładowego elementu "div#flexbox" została dodana właściwość "width" wraz z wartością "200px".

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 > :first-child {
        width:200px;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>

rozmiar

Opis

Za pomocą właściwości flex-basis oraz dowolnej wartości należącej do właściwości width lub należącej do właściwości height możemy określić rozmiar bazowy obszaru zawartości interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny.

Wartość "0" oznacza dopasowanie się rozmiaru bazowego obszaru zawartości danego elementu dziecka do najszerszej lub najwyższej posiadanej treści do wyświetlenia przez dany element dziecko.

Gdy dany element dziecko posiada wierszowy kierunek układania się, wtedy właściwość "flex-basis" określa rozmiar szerokości obszaru zawartości, natomiast gdy dany element dziecko posiada kolumnowy kierunek układania się, wtedy właściwość "flex-basis" określa rozmiar wysokości obszaru zawartości.

Dla zaawansowanych

tak naprawdę mowa tu o rozmiarze szerokości logicznej obszaru zawartości lub o rozmiarze wysokości logicznej obszaru zawartości

Przykład

div - 1
div - 2
div - 3

Rozmiar bazowy (w tym wypadku rozmiar szerokości) obszaru zawartości pierwszego elementu dziecka przykładowego elementu "div#flexbox" wynosi 150 pikseli, ponieważ do wspomnianego pierwszego elementu dziecka przykładowego elementu "div#flexbox" została dodana właściwość "flex-basis" wraz z wartością "150px".

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 > :first-child {
        flex-basis:150px;
        width:200px;
      }
    </style>
  </head>

  <body>

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

  </body>
</html>