Autor publikacji
Virtual Patriot - Administrator

flex-basis

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości flex-basis

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

Informacje dodatkowe

właściwość flex-basis ma pierwszeństwo przed właściwością width oraz właściwością height

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

przeznaczenie

  • element dziecko elementu HTML typu flex

  • element dziecko elementu HTML typu inline-flex

pozycja

static, relative

dziedziczenie

nie

wartość initial

auto

wyjątki initial

brak

animowanie

tak, lecz tylko wartość rozmiar

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

Wyjaśnienie

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

Domyślnie element dziecko elementu HTML tworzącego układ elastyczny nie posiada określonego rozmiaru głównego obszaru zawartości.

Rozmiar obszaru zawartości elementu HTML możemy kontrolować za pomocą takich właściwości CSS jak: width, min-width, max-width, height, min-height, max-height.

Przykład

  flex-basis:auto;
div - 1
div - 2
div - 3

Pierwszy element dziecko przykładowego elementu "div#flexbox" nie posiada określonego rozmiaru głównego obszaru zawartoś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) {
        width:200px;
        background-color:red;
      }

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

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

  <body>

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

  </body>
</html>

rozmiar

Wyjaśnienie

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 (w obu przypadkach z wyłączeniem wartości stretch, min-content, max-content, fit-content) możemy określić rozmiar główny obszaru zawartości interesującego nas elementu dziecka elementu HTML tworzącego układ elastyczny.

Informacje dodatkowe

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

gdy wspomniany rozmiar główny dotyczy rozmiaru szerokości obszaru zawartości elementu dziecka, wtedy wartość 0 właściwości flex-basis wskazuje na wartość auto właściwości min-width

gdy wspomniany rozmiar główny dotyczy rozmiaru wysokości obszaru zawartości elementu dziecka, wtedy wartość 0 właściwości flex-basis wskazuje na wartość auto właściwości min-height

Przykład

  flex-basis:150px;
div - 1
div - 2
div - 3

Rozmiar główny (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:1em;
        font-size:1.3em;
        background-color:#7DCDE8;
      }

      #flexbox > div {
        padding:0.5em;
      }

      #flexbox > :nth-child(1) {
        flex-basis:150px;
        width:200px;
        background-color:red;
      }

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

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

  <body>

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

  </body>
</html>