Chia cột đơn giản với CSS Flexbox

Bố cục chia cột có tính responsive sử dụng Flexbox. Dưới đây là một đoạn mã HTML và CSS để tạo một bố cục chia cột sử dụng Flexbox có tính responsive. Mã này cho phép cột co dãn trên màn hình nhỏ, giúp cải thiện trải nghiệm người dùng trên nhiều thiết bị khác nhau.

Thêm CSS này trước thẻ </head>

<style>
/*<![CDATA[*/
.custom-container{display:flex;flex-wrap:wrap;justify-content:space-between;padding:20px}
.column{flex:1;margin:10px;background-color:#f0f0f0;padding:15px;box-sizing:border-box}
@media screen and (max-width:767px){.column{flex:100%}}
/*]]>*/
</style>

<section class="custom-container">

  <div class="column">
    <h2>Column 1</h2>
    <p>Content for column 1.</p>
  </div>
  
  <div class="column">
    <h2>Column 2</h2>
    <p>Content for column 2.</p>
  </div>
  
  <div class="column">
    <h2>Column 3</h2>
    <p>Content for column 3.</p>
  </div>
  
</section>