Rumah > Artikel > hujung hadapan web > Adakah flex harta css?
Adakah flex harta css?
- 青灯夜游asal
- 2021-11-18 17:09:071731semak imbas
flex ialah sifat css. Sifat css flex ialah singkatan bagi sifat flex-grow, flex-shrink dan flex-basis Ia digunakan untuk menetapkan atau mendapatkan semula bagaimana elemen anak bagi objek model kotak flex memperuntukkan ruang jika elemen tersebut bukan elemen kanak-kanak daripada objek model kotak flex, sifat flex Tidak berfungsi.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
flex ialah sifat css.
Sifat flex digunakan untuk menetapkan atau mendapatkan semula cara elemen anak objek model kotak flex memperuntukkan ruang. Sifat
flex ialah sifat trengkas untuk sifat flex-grow, flex-shrink dan flex-basis, dengan nilai lalai 0 1 auto.
Atribut ini mempunyai dua nilai pintasan: auto (1 1 auto) dan none (0 0 auto). Adalah disyorkan untuk menggunakan atribut ini terlebih dahulu dan bukannya menulis tiga atribut berasingan secara berasingan, kerana penyemak imbas akan membuat kesimpulan nilai yang berkaitan.
Nota: Sifat flex tidak mempunyai kesan jika elemen itu bukan anak kepada objek model flexbox.
Sintaks:
flex: flex-grow flex-shrink flex-basis|auto;
flex-grow Nombor yang menyatakan jumlah item akan berkembang berbanding item fleksibel lain.
flex-shrink Nombor yang menentukan jumlah item akan mengecut berbanding item fleksibel lain.
asas lentur Panjang item. Nilai undang-undang: "auto", "inherit", atau nombor diikuti dengan "%", "px", "em" atau mana-mana unit panjang lain.
auto adalah sama dengan 1 1 auto.
tiada yang sama dengan 0 0 auto.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#main
{
width:220px;
height:300px;
border:1px solid black;
display:flex;
}
#main div
{
flex:1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">红色</div>
<div style="background-color:lightblue;">蓝色</div>
<div style="background-color:lightgreen;">带有更多内容的绿色 div</div>
</div>
</body>
</html>
(Mempelajari perkongsian video: tutorial video css)
Atas ialah kandungan terperinci Adakah flex harta css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!