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

Trang chủ » Chia Cột Html » 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;

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

Cách để tạo một Modal, Popup bằng HTML, CSS, JS cơ bản

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

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

Ẩn bớt nội dung và thêm dấu 3 chấm khi nội dung quá dài

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

Hướng dẫn CSS border gradient

Tạo mã QR với thư viện QRcode

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

Code chuyển Html sang Markdow

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

Từ khóa » Chia Cột Html