幅・高さ
min-width
要素の最小幅を指定する
| value | description |
|---|---|
100px | pxで最小幅を指定する |
20rem | remで最小幅を指定する |
100% | %で最小幅を指定する |
Demo
ウィンドウ幅を変化させ挙動を確認してください。
青いボックスはそれぞれ、幅が100%, 80%, 60%, 40%で指定されています。しかしmin-width: 300px;が指定されているため、幅が300pxを下回ることはありません。
width: 100%; min-width: 300px;
width: 80%; min-width: 300px;
width: 60%; min-width: 300px;
width: 40%; min-width: 300px;
300px
<div class="box box-1">width: 100%; min-width: 300px;</div>
<div class="box box-2">width: 80%; min-width: 300px;</div>
<div class="box box-3">width: 60%; min-width: 300px;</div>
<div class="box box-4">width: 40%; min-width: 300px;</div>
<div class="box box-base">300px</div>
.box-1 {
width: 100%;
min-width: 300px;
}
.box-2 {
width: 80%;
min-width: 300px;
}
.box-3 {
width: 60%;
min-width: 300px;
}
.box-4 {
width: 40%;
min-width: 300px;
}
.box-base {
width: 300px;
background: rgb(149, 26, 197) !important;
border-radius: 4px !important;
}
.box {
border-radius: 12px;
color: white;
font-family: monospace;
font-weight: 700;
display: flex;
padding: 8px 16px;
margin-bottom: 8px;
background: rgb(14, 165, 233);
}
.wrapper {
display: flex;
flex-direction: column;
}
概要
要素の最小幅を指定する。widthが最小幅を下回っていた場合、min-widthの値が要素の幅となる。