🔥🔥 HOT! 🔥🔥 Template siêu VIP #500K

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

Zalo 0971539681 Tư vấn & Hỗ trợ

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>

Thêm HTML

<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>

Các bạn để ý 3 màu mình tô bên trên, cứ 1 màu là 1 cột, 2 cột thì xóa bớt màu dưới... Tự động nó sẽ tạo 2 cột cho các bạn.

Bài liên quan ngẫu nhiên

Nhận xét

Contact Me on Zalo