Reka letak CSS Flexbox: Gunakan susun atur kotak fleksibel untuk mencapai struktur susun atur fleksibel-tutorial css-php.cn

Reka letak CSS Flexbox: Gunakan susun atur kotak fleksibel untuk mencapai struktur susun atur fleksibel

WBOY

Lepaskan： 2023-11-18 17:30:03

asal

1109 orang telah melayarinya

CSS Flexbox布局：利用弹性盒子布局实现灵活的布局结构

Layout CSS Flexbox: Pelaksanaan Struktur Reka Letak Fleksibel

Pengenalan:
Dalam pembangunan bahagian hadapan, reka letak halaman ialah pautan penting. Kaedah susun atur tradisional, seperti menggunakan terapung atau kedudukan, kadangkala menyebabkan beberapa masalah apabila reka bentuk tidak mematuhi piawaian. Untuk mengatasi masalah ini, CSS3 memperkenalkan susun atur Flexbox, yang boleh menyediakan pembangun dengan penyelesaian susun atur halaman yang lebih fleksibel dan berkuasa.

Prinsip susun atur Flexbox adalah untuk meletakkan bekas dan item di dalam bekas (item flex) masing-masing pada paksi mendatar dan menegak, dan menggunakan fleksibiliti untuk mengagihkan dan menjajarkan item. Kaedah susun atur ini sangat sesuai untuk membina reka letak halaman responsif dan adaptif.

Bekas Flex dan item Flex:
Menggunakan susun atur Flexbox, kita perlu membungkus elemen yang ingin kita susun dalam bekas induk. Bekas induk ini dipanggil bekas Flex, dan ia mendayakan susun atur Flexbox dengan menetapkan sifat paparan kepada flex atau inline-flex.

Item Flex ialah elemen anak langsung dalam bekas Flex. Mereka adalah unit asas susun atur. Item fleksibel mempunyai sifat, seperti tertib, flex-grow, flex-shrink, flex-basis dan align-self, yang melaluinya kita boleh menentukan susunan dan tingkah lakunya dalam bekas induk.

Sifat susun atur asas:
Dalam susun atur Flexbox, terdapat beberapa sifat asas yang digunakan untuk mengawal tingkah laku bekas Flex dan item Flex.

Atribut arah lentur: digunakan untuk menentukan arah susunan item Flex dalam bekas Flex. Nilainya boleh menjadi baris (mendatar, lalai), baris-terbalik (terbalik mendatar), lajur (menegak), atau lajur-terbalik (terbalik menegak).
atribut justify-content: digunakan untuk menentukan penjajaran item Flex pada paksi utama. Nilainya boleh menjadi flex-start (lalai, dijajar ke kiri), flex-end (dijajarkan ke kanan), tengah (dijajarkan ke tengah), ruang-antara (dijajarkan pada kedua-dua hujung, jarak yang sama antara item) atau ruang-keliling (item dijajarkan di kedua-dua hujungnya sama jarak pada kedua-dua belah). Atribut
align-item: digunakan untuk menentukan penjajaran item Flex pada paksi silang. Nilainya boleh menjadi mula-lentur (lalai, penjajaran atas), hujung-lentur (penjajaran bawah), tengah (penjajaran tengah), garis dasar (garis dasar penjajaran), atau regangan (isi regangan).

Contoh demonstrasi:
Berikut ialah contoh reka letak halaman mudah menggunakan reka letak Flexbox Kod khusus adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      border: 1px solid #ccc;
    }
    
    .item {
      border: 1px solid #f00;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Flex Item 1</div>
    <div class="item">Flex Item 2</div>
    <div class="item">Flex Item 3</div>
  </div>
</body>
</html>

Salin selepas log masuk

Dalam contoh ini, kami mencipta bekas Flex (nama kelas.bekas) dan menetapkan paparan Set gayanya. : flex supaya ia membolehkan susun atur Flexbox. Tiga elemen anak (nama kelas .item) dalam bekas menjadi item Flex.

Dengan menetapkan justify-content: center and align-item: center, kami menyelaraskan tengah item Flex pada kedua-dua paksi utama dan paksi silang. Pada masa yang sama, kami juga menetapkan ketinggian bekas kepada 300px dan gaya sempadan untuk memaparkan kesan dengan lebih baik.

Ringkasan:
Susun atur CSS Flexbox ialah penyelesaian reka letak halaman yang berkuasa dan fleksibel yang boleh membantu pembangun dengan mudah melaksanakan pelbagai struktur reka letak. Dengan menetapkan sifat bekas Flex dan item Flex, kita boleh mengawal susunan dan penjajarannya pada paksi utama dan silang.

Contoh di atas hanyalah aplikasi mudah susun atur Flexbox Dalam pembangunan sebenar, kita boleh menggunakan lebih banyak atribut dan teknik untuk membina struktur susun atur yang kompleks mengikut keperluan tertentu. Saya harap artikel ini dapat membantu anda lebih memahami dan menggunakan reka letak CSS Flexbox.

Atas ialah kandungan terperinci Reka letak CSS Flexbox: Gunakan susun atur kotak fleksibel untuk mencapai struktur susun atur fleksibel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!