Ostatnio edytowany:

min-width

Autor: Virtual Patriot

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

Dodatkowe techniczne informacje 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 HTML posiadających właściwość overflow wraz z wartością visible oraz będących elementami dziećmi elementu HTML typu flex lub inline-flex.

pozycja

dowolna

dziedziczenie

nie

wartość initial

0 lub auto (gdy wartością właściwości overflow elementu HTML jest 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

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 7

Nie interpretuje wartości auto.

Edge

tak

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

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

rozmiar

Opis

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

Przykład

  min-width:350px;
element "div"

Minimalny rozmiar szerokości obszaru zawartości przykładowego elementu "div" (pływającego w kierunku lewej krawędzi obszaru zawartości elementu rodzica) 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 {
        float:left;
        min-width:350px;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>element "div"</div>

  </body>
</html>

auto

Opis

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 określony przez rozmiar szerokości największej pojedynczej posiadanej treści do wyświetlenia przez dany element dziecko.

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 obszaru zawartości między innymi pierwszego elementu dziecka przykładowego elementu "div#flexbox" uzależniony jest od rozmiaru określonego przez rozmiar szerokości największej pojedynczej posiadanej treści do wyświetlenia przez wspomniany pierwszy element dziecko przykładowego elementu "div#flexbox" (w tym wypadku tą największą pojedynczą posiadaną treścią do wyświetlenia jest wyraz "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:#CBFFFF;
      }

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