Chia Cột Bằng Thuộc Tính Display Flex Trong CSS - Cáo Đêm

Trang chủ » Chia Cột Bằng Css » Chia Cột Bằng Thuộc Tính Display Flex Trong CSS - Cáo Đêm

Có thể bạn quan tâm

CODE BÀI VIẾT <div class="flex"> <div>Nội dung 1</div> <div>Nội dung 2</div> <div>Nội dung 3</div> <div>Nội dung 4</div> </div> <br/> <div class="inline-flex"> <div>Nội dung 1</div> <div>Nội dung 2</div> <div>Nội dung 3</div> <div>Nội dung 4</div> </div> <style> /* flex */ .flex{ display:flex; background:#fff444; } .flex div{ padding:10px; border:2px solid #999; margin:10px; } /* inline-flex */ .inline-flex{ display:inline-flex; background:#fff444; } .inline-flex div{ padding:10px; border:2px solid #999; margin:10px; } </style> Chia cột bằng thuộc tính display flex trong CSS Html & Css ihoan đã viết 4 năm trước

CSS3 ra mắt 2 giá trị mới cho thuộc tính display là flex và inline-flex, giúp sắp xếp, bố cục các thành phần khối (block) một cách dễ dàng, linh hoạt hơn trước. display: flex và display: inline-flex và các thuộc tính đi kèm được sử dụng khá nhiều trong việc xử lý các cấu trúc, nếu như trước đây đôi lúc cần Javascript để hỗ trợ, thì giờ đây display flex sẽ giúp xử lý nhiều cấu trúc phức tạp một cách dễ dàng.

Cách sử dụng flex

<div class="flex"> <div>Nội dung 1</div> <div>Nội dung 2</div> <div>Nội dung 3</div> <div>Nội dung 4</div> </div>

Ở nội dung HTML sẽ có một thẻ div với class là flex bao ngoài các thẻ div chứa nội dung, thẻ bao ngoài này sẽ đảm nhận việc chia các thẻ bên trong thành các cột.

<style> /* flex */ .flex{ display:flex; } </style>

CSS với display:flex  hoặc  display:inline-flex;

3133 Bài viết cùng chủ đề

Thư viện mã QR kèm logo ở giữa

Hiệu ứng Hover cho hình ảnh khi đưa chuột vào

Thay đổi màu link khi di chuột vào

Chia cột bằng thuộc tính display grid trong CSS

Xóa bỏ gạch chân cho link trong html css

Đọc text trong hình ảnh

Crop hình ảnh bằng CSS đơn giản và cần thiết

Code chuyển Html sang Markdow

Căn giữa Hình ảnh, thẻ Div, Text trong CSS

Hướng dẫn CSS border gradient

Từ khóa » Chia Cột Bằng Css