cari

Rumah >hujung hadapan web >tutorial css >Apakah itu css3 flexbox

Apakah itu css3 flexbox

WBOY
WBOYasal
2021-12-22 11:57:571981semak imbas

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>

Hasil output:
Apakah itu css3 flexbox

(Mempelajari perkongsian video: tutorial video css)

Atas ialah kandungan terperinci Apakah itu css3 flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Apakah rupa css3 offset ke kiri?Artikel seterusnya：Apakah rupa css3 offset ke kiri?

Artikel berkaitan

Lihat lagi