Bagaimana cara menggunakan susun atur flex untuk mencapai pengedaran penanda buku pertama secara menegak dan kemudian secara mendatar?

Susun atur Flex yang bijak dan pemilih CSS untuk mencapai pengagihan penanda buku pertama dan kemudian secara mendatar

Bagaimana dengan cekap mengatur sejumlah besar penanda buku adalah satu cabaran yang sama apabila membangunkan sambungan pengurusan penanda buku. Artikel ini memperkenalkan kaedah pintar menggunakan susun atur flex dan pemilih CSS an b untuk mencapai pengedaran seragam penanda halaman pertama dan kemudian secara mendatar, mengelakkan masalah susunan yang tidak sekata di bawah bilangan lajur terhingga.

Soalan: Katakan terdapat beberapa penanda buku, anda perlu diatur secara menegak terlebih dahulu, penuh secara menegak, kemudian mendatar, dan akhirnya diedarkan secara merata. Sebagai contoh, 6 penanda buku dan 5 lajur dipaparkan, hasil yang ideal:

<code>一二三四五① ③ ④ ⑤ ⑥ ②</code>

Tetapi kesan sebenar mungkin:

<code>一二三四五① ③ ⑤ ② ④ ⑥</code>

Beberapa lajur terakhir kelihatan kosong. Susun atur yang sedia ada mengamalkan susun atur flex ( flex-direction: column ), yang mengawal bilangan baris dengan menyesuaikan ketinggian kontena, dan menyokong penambahan penanda buku dan operasi utama dan penghapusan.

Penyelesaian: Tiada algoritma kompleks diperlukan, hanya memanfaatkan pemilih CSS an b . Dengan mengira jumlah penanda halaman dan lajur, tentukan nilai a dan b yang sesuai, dan kemudian gunakan pemilih ini untuk menambah margin bawah ke penanda buku tertentu (mis. margin-bottom: 1px; ). Kaedah ini mudah dan cekap, dan tidak akan menjejaskan operasi kekunci pintasan dan penambahan dan penghapusan bookmark. Melalui kaedah ini, anda boleh mencapai pengedaran penanda halaman secara menegak dan kemudian secara mendatar, mengelakkan lajur kosong.

Atas ialah kandungan terperinci Bagaimana cara menggunakan susun atur flex untuk mencapai pengedaran penanda buku pertama secara menegak dan kemudian secara mendatar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!