Bagaimana untuk Menjajarkan Kandungan Menegak Secara Mendatar dalam Lajur Flexbox?

Mengimbangi Ketinggian Kanak-kanak dalam Ibu Bapa Berbeza dengan Flexbox

Soalan:

Dalam reka letak dua lajur di mana setiap lajur mengandungi kandungan dengan panjang yang berbeza-beza, bagaimanakah kita boleh memastikan bahawa senarai dalam kedua-dua lajur kekal sejajar secara mendatar tanpa melanggar pengoptimuman mudah alih Bootstrap? Sebaik-baiknya, penyelesaian harus memanfaatkan Flexbox dan mengelakkan JavaScript.

Jawapan:

Untuk mencapai ini tanpa JavaScript, kita perlu membuat semua item kandungan (tajuk, perenggan dan senarai) adik-beradik dalam penanda.

Apabila lebar skrin membenarkan paparan sebelah menyebelah lajur, item ini perlu disusun semula untuk mengekalkan penjajaran yang betul:

• Pertanyaan Media:

  <code class="css">@media (min-width: 768px) {
    // Flexbox rules
  }</code>

  Salin selepas log masuk

• Konfigurasi Flexbox:

  <code class="css">.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .content > * {
    flex-basis: calc(50% - 30px); // Adjust for gutters
  }</code>

  Salin selepas log masuk

• Pemesanan Elemen:

  <code class="css">.content h2 { 
    order: 0; // Heading (row 1)
  }
  
  .content p { 
    order: 1; // Paragraphs (row 2)
  }
  
  .content p + p { 
    order: 2; // Second paragraph (row 3)
  }
  
  .content ul { 
    order: 3; // List (row 4)
  }</code>

  Salin selepas log masuk

Pertimbangan:

• Sempadan: Kepada tambah sempadan, gunakan gabungan sifat sempadan pada elemen dan laraskannya dengan pertanyaan media untuk mengambil kira konfigurasi tindanan yang berbeza.

Kod Kemas Kini:

Lihat codepen yang dikemas kini untuk contoh yang berfungsi:

[Pautan Codepen]

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Kandungan Menegak Secara Mendatar dalam Lajur Flexbox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!