5

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

Tác giả: Hòa Trần Blogger - đăng vào tháng 3 01, 2020

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.
Đừng bỏ lỡ.
Hổ trợ 24/7

Đừng ngừng ngại liên hệ chúng tôi, hổ trợ 24/7. Hotline: 097 1539 681

alt
alt