Apakah itu css3 flexbox-tutorial css-php.cn

Apakah itu css3 flexbox

WBOY

Lepaskan： 2021-12-22 11:57:57

asal

1953 orang telah melayarinya

Dalam CSS3, kotak fleksibel ialah kaedah reka letak yang menyediakan cara yang lebih berkesan untuk memperuntukkan ruang untuk menyesuaikan halaman kepada saiz skrin dan jenis peranti yang berbeza anda boleh menggunakan atribut paparan untuk menentukan kotak fleksibel . Sintaks ialah "display:flex" atau "display:inline-flex".

Apakah itu css3 flexbox

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Apakah itu css3 flexbox

Kotak fleksibel ialah mod reka letak baharu CSS3.

Kotak Fleksibel CSS3 (Kotak Fleksibel atau flexbox) ialah kaedah reka letak yang memastikan elemen mempunyai gelagat yang sesuai apabila halaman perlu menyesuaikan diri dengan saiz skrin dan jenis peranti yang berbeza.

Tujuan memperkenalkan model susun atur flexbox adalah untuk menyediakan cara yang lebih cekap untuk menyusun, menjajarkan dan memperuntukkan ruang kosong kepada sub-elemen dalam bekas.

Kotak fleksibel terdiri daripada bekas Flex dan item Flex.

Bekas fleksibel ditakrifkan sebagai bekas fleksibel dengan menetapkan nilai sifat paparan kepada flex atau inline-flex.

Bekas fleksibel mengandungi satu atau lebih sub-elemen fleksibel.

Nota: Di luar bekas fleksibel dan dalam elemen kanak-kanak fleksibel dipaparkan secara normal. Kotak flex hanya mentakrifkan cara elemen anak flex dibentangkan dalam bekas flex.

Elemen kanak-kanak fleksibel biasanya dipaparkan dalam satu baris dalam kotak fleksibel. Secara lalai hanya terdapat satu baris setiap bekas.

Elemen berikut menunjukkan elemen anak lentur yang dipaparkan dalam satu baris, dari kiri ke kanan:

Contohnya adalah seperti berikut:

<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

Salin selepas log masuk

Hasil output:
Apakah itu css3 flexbox