Atribut min-inline-size CSS

Halaman sebelumnya min-block-size
Halaman berikutnya min-height

Definisi dan penggunaan

min-inline-size Properti yang menentukan ukuran minimum elemen dalam arah horizontal.

Jika ukuran konten di arah dalam lebih kecil daripada ukuran minimum, maka akan diterapkan min-inline-size nilai atribut.

Jika ukuran konten di arah dalam lebih besar daripada ukuran minimum, maka min-inline-size nilai atribut ini tidak berfungsi.

Perhatian:atribut CSS yang relevan writing-mode Mendefinisikan arah dalam, yang akan mempengaruhi min-inline-size hasil atribut. Untuk halaman berbahasa Inggris, arah blok turun, sementara arah dalam berlawanan dari kiri ke kanan.

CSS min-inline-size atribut dengan atribut CSS min-height dan min-width Sama seperti, tetapi min-inline-size Atribut ini tergantung pada arah dalam.

Contoh

Contoh 1

Atur ukuran minimum elemen teks dalam arah dalam elemen <div> menjadi 200 pixel:

div {
  min-inline-size: 200px;
}

Coba sendiri

Contoh 2: Mode tulisan

Atur elemen <div> writing-mode Ketika atribut value diatur menjadi vertical-rl, arah dalam elemen teks berubah dari horizontal ke vertikal, yang akan mempengaruhi cara kerja atribut min-inline-size:

div {
  min-inline-size: 260px;
  writing-mode: vertical-rl;
}

Coba sendiri

Contoh 3: min-inline-size dan inline-size

Lihat contoh inline-size elemen <div> berukuran 200px dan lainnya min-inline-size Tampilan yang berbeda dari elemen <div> berukuran 200px saat ukuran konten berubah:

#div1 {
  min-inline-size: 200px;
}
#div2 {
  inline-size: 200px;
}

Coba sendiri

Syntaks CSS

min-inline-size: auto|length|initial|inherit;

Nilai atribut

Nilai	Deskripsi
auto	Standar. Nilai standar min-inline-size elemen.
length	Gunakan satuan tetap (seperti px, pt, cm, dll) untuk menentukan ukuran minimum. Lihat:Unit CSS.
%	Gunakan persen untuk menentukan ukuran minimum, yang berbanding dengan ukuran elemen induk di sumbu yang relevan.
initial	Atur atribut ini ke nilai standarnya. Lihat: initial.
inherit	Mengambil atribut ini dari elemen induknya. Lihat: inherit.

Detil teknis

Nilai standar:	auto
Inheritsi:	Tidak
Pembuatan animasi:	Didukung. Lihat:Atribut yang berhubungan dengan animasi.
Versi:	CSS3
Syntaks JavaScript:	object.style.minInlineSize="10px"