Autor publikacji
Virtual Patriot - Administrator

min-width

Data publikacji
Ostatnio edytowano

Przeznaczenie właściwości min-width

Za pomocą właściwości min-width możemy określić minimalny rozmiar szerokości obszaru zawartości interesującego nas elementu HTML.

Informacje dodatkowe

właściwość min-width ma pierwszeństwo przed właściwością width oraz właściwością max-width

Informacje techniczne o właściwości min-width

przeznaczenie

element HTML tworzący blok treści, lecz nie element HTML typu table-header-group, table-row-group, table-footer-group, table-row

Dodatkowo wartość auto przeznaczona jest wyłącznie dla elementów dzieci elementu HTML typu flex lub inline-flex, których wartość właściwości overflow wskazuje na wartość visible.

pozycja

dowolna

dziedziczenie

nie

wartość initial

0 (lub auto gdy wartość właściwości overflow elementu HTML wskazuje na wartość visible oraz gdy element HTML jest elementem dzieckiem elementu HTML typu flex lub inline-flex)

wyjątki initial

brak

animowanie

tak

Interpretacja właściwości min-width

Firefox

tak

Interpretuje wartość fit-content, lecz z przedrostkiem "-moz-", czyli zapis "-moz-fit-content".

Dla wartości stretch interpretuje tylko zapis alternatywny "-moz-available".

Google Chrome

tak

Dla wartości stretch interpretuje tylko zapis alternatywny "-webkit-fill-available".

Safari

tak

Opera

tak

Dla wartości stretch interpretuje tylko zapis alternatywny "-webkit-fill-available".

Internet Explorer

tak, lecz od wersji 7

Nie interpretuje wartości stretch, min-content, max-content oraz fit-content oraz auto.

Edge

tak

Dla wartości stretch interpretuje tylko zapis alternatywny "-webkit-fill-available".

Zobacz więcej informacji o interpretacji właściwości .

Zobacz więcej informacji o interpretacji wartości , , , właściwości "min-width".

Opis wartości właściwości min-width

rozmiar

Wyjaśnienie

Za pomocą właściwości min-width oraz dowolnej nieujemnej liczby wraz z wybraną jednostką absolutną lub jednostką relatywną lub za pomocą procentów możemy określić minimalny rozmiar szerokości obszaru zawartości interesującego nas elementu HTML.

Wartości procentowe

wartości procentowe liczone są względem aktualnego rozmiaru szerokości obszaru zawartości najbliższego powiązanego elementu przodka

gdy dany element HTML jest elementem HTML należącym do siatki elementu HTML tworzącego układ siatki, wtedy wartości procentowe liczone są względem aktualnego rozmiaru znajdującego się pomiędzy początkową krawędzią kolumnową, a końcową krawędzią kolumnową miejsca, do którego został przypisany dany element HTML

Przykład

  min-width:350px;
element "div"

Minimalny rozmiar szerokości, jaki może posiadać obszar zawartości przykładowego elementu "div" wynosi 350 pikseli, ponieważ do wspomnianego elementu "div" została dodana właściwość "min-width" wraz z wartością "350px".

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;
      }

      div {
        display:inline-block;
        min-width:350px;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>element "div"</div>

  </body>
</html>

stretch

Wyjaśnienie

Za pomocą wartości stretch właściwości min-width możemy sprawić, że minimalny rozmiar szerokości obszaru zawartości interesującego nas elementu HTML uzależniony będzie od rozmiaru szerokości wolnej przestrzeni, jaka pozostała wzdłuż obszaru, do którego należy ten element HTML.

Przykład

  min-width:stretch;
div#rodzic
div#dziecko

Minimalny rozmiar szerokości, jaki może posiadać obszar zawartości przykładowego elementu "div#dziecko" uzależniony jest od rozmiaru szerokości wolnej przestrzeni, jaka pozostała wzdłuż obszaru zawartości przykładowego elementu "div#rodzic", ponieważ do wspomnianego elementu "div#dziecko" została dodana właściwość "min-width" wraz z wartością "stretch".

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;
      }

      #rodzic {
        width:300px;
        padding:1em;
        font-size:1.3em;
        background-color:red;
      }

      #dziecko {
        display:inline-block;
        min-width:stretch;
        min-width:-moz-available;
        min-width:-webkit-fill-available;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">div#rodzic
      <div id="dziecko">div#dziecko</div>
    </div>

  </body>
</html>

min-content

Wyjaśnienie

Za pomocą wartości min-content właściwości min-width możemy sprawić, że minimalny rozmiar szerokości obszaru zawartości interesującego nas elementu HTML uzależniony będzie od najszerszej pojedynczej posiadanej treści do wyświetlenia przez ten element HTML.

Informacje dodatkowe

gdy rozmiar szerokości elementu HTML nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu HTML, czyli na osi liniowej, wtedy wartość min-content działa na takiej samej zasadzie, jak wartość 0

Przykład

  min-width:min-content;
ABCD EFGHIJK LM NOP QRSTU V WXYZ

Minimalny rozmiar szerokości, jaki może posiadać obszar zawartości przykładowego elementu "div" uzależniony jest od najszerszej pojedynczej posiadanej treści do wyświetlenia przez przykładowy element "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "min-width" wraz z wartością "min-content" (w tym wypadku wspomnianą treścią jest ciąg znaków "EFGHIJK").

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;
      }

      div {
        display:inline-block;
        min-width:min-content;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ABCD EFGHIJK LM NOP QRSTU V WXYZ
    </div>

  </body>
</html>

max-content

Wyjaśnienie

Za pomocą wartości max-content właściwości min-width możemy sprawić, że minimalny rozmiar szerokości obszaru zawartości interesującego nas elementu HTML uzależniony będzie od możliwie najszerszej posiadanej treści do wyświetlenia przez ten element HTML.

Informacje dodatkowe

gdy rozmiar szerokości elementu HTML nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu HTML, czyli na osi liniowej, wtedy wartość max-content działa na takiej samej zasadzie, jak wartość 0

Przykład

  min-width:max-content;
ABCD EFGHIJK LM NOP QRSTU V WXYZ

Minimalny rozmiar szerokości, jaki może posiadać obszar zawartości przykładowego elementu "div" uzależniony jest od możliwie najszerszej posiadanej treści do wyświetlenia przez przykładowy element "div", ponieważ do wspomnianego elementu "div" została dodana właściwość "min-width" wraz z wartością "max-content" (w tym wypadku wspomnianą treścią jest ciąg znaków "ABCD EFGHIJK LM NOP QRSTU V WXYZ").

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;
      }

      div {
        display:inline-block;
        min-width:max-content;
        font-size:1.3em;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      ABCD EFGHIJK LM NOP QRSTU V WXYZ
    </div>

  </body>
</html>

fit-content

Wyjaśnienie

Za pomocą wartości fit-content właściwości min-width możemy sprawić, że wartością minimalnego rozmiaru szerokości obszaru zawartości interesującego nas elementu HTML będzie możliwie największa wartość mieszcząca się w zakresie wartości od min-content do max-content.

W tym wypadku wartość większa od wartości min-content nie może powodować przepełnienia.

W tym wypadku minimalnym rozmiarem szerokości obszaru zawartości elementu HTML reprezentującego treść zewnętrzną (plik graficzny, plik audio, plik video itp.) będzie rozmiar, na który wskazuje wartość min-content, ponadto rozmiar ten może zostać dodatkowo równomiernie przeskalowany na podstawie posiadanej przez element HTML wartości właściwości height.

Informacje dodatkowe

gdy rozmiar szerokości elementu HTML nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu HTML, czyli na osi liniowej, wtedy wartość fit-content działa na takiej samej zasadzie, jak wartość 0

Przykład

  min-width:fit-content;
div#rodzic
DIV#DZIECKO ABCD EFGHIJK LM NOP QRSTU V WXYZ

Wartością minimalnego rozmiaru szerokości, jaki może posiadać obszar zawartości przykładowego elementu "div#dziecko" jest możliwie największa wartość mieszcząca się w zakresie wartości od "min-content" do "max-content" oraz niepowodująca przepełnienia rozmiaru szerokości obszaru zawartości przykładowego elementu "div#rodzic", ponieważ do wspomnianego elementu "div#dziecko" została dodana właściwość "min-width" wraz z wartością "fit-content".

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;
      }

      #rodzic {
        width:300px;
        padding:1em;
        font-size:1.3em;
        background-color:red;
      }

      #dziecko {
        display:inline-block;
        min-width:fit-content;
        min-width:-moz-fit-content;
        background-color:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">
      div#rodzic
      <div id="dziecko">
        DIV#DZIECKO ABCD EFGHIJK LM NOP QRSTU V WXYZ
      </div>
    </div>

  </body>
</html>

auto

Wyjaśnienie

Wartość auto jest domyślną wartością właściwości min-width elementów dzieci elementu HTML typu flex lub inline-flex.

Domyślnie minimalnym rozmiarem szerokości obszaru zawartości elementu dziecka elementu HTML typu flex lub inline-flex jest rozmiar, na który wskazuje wartość min-content.

Informacje dodatkowe

gdy rozmiar szerokości elementu dziecka elementu HTML typu flex lub inline-flex nie znajduje się pomiędzy początkową oraz końcową krawędzią liniową tego elementu dziecka, czyli na osi liniowej, wtedy wartość auto działa na takiej samej zasadzie, jak wartość 0

gdy element dziecko elementu HTML typu flex lub inline-flex posiada właściwość overflow-x (lub overflow) wraz z wartością różną od wartości visible, wtedy wartość auto działa na takiej samej zasadzie, jak wartość 0

Przykład

  min-width:auto;
przykładowy element div - 1
div - 2
div - 3

Domyślnie minimalny rozmiar szerokości, jaki może posiadać obszar zawartości między innymi pierwszego elementu dziecka przykładowego elementu "div#flexbox" uzależniony jest od najszerszej pojedynczej posiadanej treści do wyświetlenia przez wspomniany pierwszy element dziecko przykładowego elementu "div#flexbox" (w tym wypadku wspomnianą treścią jest ciąg znaków "przykładowy").

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%;
      }

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

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

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

  <body>

    <div id="flexbox">
      <div>przykładowy element div - 1</div>
      <div>div - 2</div>
      <div>div - 3</div>
    </div>

  </body>
</html>