Bagaimana untuk menggunakan lajur dalam grid untuk membalut lentur secara mendatar?

Question

https://codepen.io/itaied246/pen/eYbOWjm

Saya berjaya mencipta kotak fleksibel dengan tatal menegak yang mengisi ruang secara mendatar dan tatal ke bawah.

Saya mahu melakukan perkara yang sama secara mendatar, iaitu mengisi ruang secara menegak dan tatal ke kanan.

flex saya berada di dalam grid dengan maks-kandungan.

Apa yang saya terlepas?

Answer 1

Anda perlu menetapkan ketinggian pada flexbox anda. Dalam kes ini, hanya menambah height: 400px pada kelas .flex-columns akan menyelesaikan masalah.

Alasannya ialah kotak flex anda menganggap ia boleh setinggi mungkin, dan memandangkan arah flex ditetapkan kepada lajur, ia meletakkan semuanya dalam satu lajur. Lebih mudah untuk digambarkan apabila flexbox adalah satu baris!