Penjelasan terperinci tentang garis dasar penskalaan dan konsep saiz asas dalam susun atur fleksibel CSS Flex-tutorial css-php.cn

Penjelasan terperinci tentang garis dasar penskalaan dan konsep saiz asas dalam susun atur fleksibel CSS Flex

PHPz

Lepaskan： 2023-09-26 12:49:02

asal

874 orang telah melayarinya

详解Css Flex 弹性布局中的伸缩基准线与基本尺寸概念

Penjelasan terperinci tentang garis dasar penskalaan dan konsep saiz asas dalam susun atur fleksibel CSS Flex

Pengenalan:

#🎜 Apabila kerumitan halaman Web meningkat, kaedah susun atur model kotak tradisional secara beransur-ansur mendedahkan batasannya. Untuk menyelesaikan masalah reka letak, susun atur elastik CSS Flex telah wujud. Reka letak fleksibel menyediakan cara yang fleksibel untuk menyusun elemen, menjadikan halaman lebih mudah disesuaikan dan sesuai untuk pelbagai peranti dan saiz skrin yang berbeza. Dalam reka letak Flex, garis dasar boleh skala dan saiz asas adalah konsep penting Artikel ini akan menerangkannya secara terperinci dan memberikan contoh kod yang sepadan.

1. Garisan lentur (garisan lentur)

Garis dasar lentur ialah konsep barisan elemen dalam bekas Flex. Setiap garis dasar flex terdiri daripada satu atau lebih baris item Flex. Bekas Flex menyusun elemen dalam arah mendatar secara lalai, dan akan membalut secara automatik apabila terdapat berbilang baris, membentuk berbilang garis dasar boleh skala.

Berikut ialah kod sampel:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
</div>

Salin selepas log masuk

.container {
    display: flex;
    flex-wrap: wrap;
}

.item {
    flex: 1 0 200px;
    height: 100px;
}

Salin selepas log masuk

Dalam kod di atas, .container ialah bekas Flex dan .item ialah item Flex. Dengan menetapkan sifat paparan .container kepada flex, anda boleh menjadikannya bekas Flex. Pada masa yang sama, dengan menetapkan sifat flex-wrap .container untuk dibalut, item Flex boleh dibalut secara automatik ke dalam berbilang garis dasar yang fleksibel.

2. Saiz asas (asas fleksibel)

Saiz asas ialah atribut item Flex, yang menentukan saiz awal item Flex pada garis dasar penskalaan. Saiz asas boleh ditetapkan melalui sifat flex. Sifat flex ialah sifat trengkas yang merangkumi tiga sifat khusus: flex-grow, flex-shrink dan flex-basis. Antaranya, flex-grow digunakan untuk menetapkan fleksibiliti item Flex, flex-shrink digunakan untuk menetapkan pengecutan item Flex, dan flex-basis digunakan untuk menetapkan saiz asas item Flex.

Berikut ialah kod sampel:

<div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
</div>

Salin selepas log masuk

.container {
    display: flex;
}

.item {
    flex: 1 0 200px;
    height: 100px;
}

Salin selepas log masuk

Dalam kod di atas, .item menetapkan atribut flex kepada 1 0 200px. Antaranya, nilai flex-grow ialah 1, bermakna item Flex boleh mengembang dan mengecut mengikut ruang yang ada, dan nisbahnya ialah 1, nilai flex-shrink ialah 0, bermakna item Flex akan tidak dikecilkan apabila ruang tidak mencukupi; nilai asas-flex ialah 200px bermakna saiz asas item Flex ialah 200px.

Ringkasan:

Dalam susun atur Flex, garis dasar penskalaan dan saiz asas adalah konsep yang sangat penting. Memahami dan menguasai konsep ini boleh membantu kami menggunakan reka letak Flex dengan lebih baik dan mencapai reka letak halaman yang fleksibel. Dengan mengkonfigurasi garis dasar penskalaan dan saiz asas secara fleksibel, kami boleh mencapai reka letak penyesuaian di bawah saiz skrin yang berbeza. Saya harap penjelasan dan contoh kod dalam artikel ini akan membantu anda.

Atas ialah kandungan terperinci Penjelasan terperinci tentang garis dasar penskalaan dan konsep saiz asas dalam susun atur fleksibel CSS Flex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!