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.
min-width:350px;
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".
<!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>
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.
min-width:stretch;
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".
<!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>
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.
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").
<!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>
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.
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").
<!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>
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.
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".
<!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>
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.
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").
<!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>
