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;

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

Code chuyển Html sang Markdow

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

Hiệu ứng zoom, phóng to hình ảnh khi đưa chuột vào

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

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

Bộ lọc select tỉnh thành, quận huyện sử dựng API provinces.open-api.vn

Đọc text trong hình ảnh

Hiển thị menu khi click chuột phải như ở màn hình máy tính

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

Từ khóa » Chia Cột Html