Blogs

Display flex

Bạn đang quan tâm đến Display flex phải không? Nào hãy cùng ONLINEAZ đón xem bài viết này ngay sau đây nhé, vì nó vô cùng thú vị và hay đấy!

XEM VIDEO Display flex tại đây.

Display flex là gì

HTML viết:

<!DOCTYPE HTML> <html> <head></head> <body> <div class=”box”> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>

CSS viết – khi chưa sử dụng display flex:

Bạn đang xem: Display flex là gì

.box { border: 1px solid #ccc; min-height: 300px; } .box div { margin: 5px; text-align: center; background-color: #72C953; } .box div:nth-child(1) { height: 70px; width: 70px; line-height: 70px; } .box div:nth-child(2) { height: 50px; width: 50px; line-height: 50px; } .box div:nth-child(3) { height: 30px; width: 30px; line-height: 30px; }

Hiển thị trình duyệt:

1 2 3

Xem thêm: Think Up là gì và cấu trúc cụm từ Think Up trong câu Tiếng Anh

Bây giờ ta sẽ lần lượt áp dụng display: flex và display: inline-flex để hiểu hơn cách hoạt động của các thuộc tính này:

display: flex

.box { border: 1px solid #ccc; min-height: 300px; display: flex; } .box div { margin: 5px; text-align: center; background-color: #72C953; } .box div:nth-child(1) { height: 70px; width: 70px; line-height: 70px; } .box div:nth-child(2) { height: 50px; width: 50px; line-height: 50px; } .box div:nth-child(3) { height: 30px; width: 30px; line-height: 30px; }

Hiển thị trình duyệt:

1 2 3

Ta thấy display: flex đã giúp cho các thành phần được hiển thị linh hoạt hơn.

display: inline-flex

.box { border: 1px solid #ccc; min-height: 300px; display: inline-flex; } .box div { margin: 5px; text-align: center; background-color: #72C953; } .box div:nth-child(1) { height: 70px; width: 70px; line-height: 70px; } .box div:nth-child(2) { height: 50px; width: 50px; line-height: 50px; } .box div:nth-child(3) { height: 30px; width: 30px; line-height: 30px; }

Hiển thị trình duyệt:

1 2 3

Có thể bạn quan tâm: Đấu La Đại Lục Chương 434 : Rút ra thần khí Hải Thần Tam Xoa Kích

XEM THÊM:  Hướng Dẫn Cách Làm Quần Áo Bằng Giấy Báo, Thời Trang Tái Chế Bằng Giấy Báo Bạn Đã Thử Chưa

Ta thấy display inline-flex đã đối xử với thành phần như dạng inline.

Điểm mạnh của display flex và display inline-flex là khi 2 giá trị này được dùng kết hợp với các thuộc tính khác, các bạn xem chi tiết kết hợp Flex box để hiểu thêm nhé.

Bên dưới đây sẽ cho các bạn thấy một số kết hợp thường dùng, giá trị được viết bên trong class box:

.box { Viết ở chỗ này ^^ }

Kết hợp 1 giá trị

Ví dụ Kết quả display: flex; 1 2 3 display: flex; flex-direction: row-reverse; 1 2 3 display: flex; justify-content: center; 1 2 3 display: flex; justify-content: flex-end; 1 2 3 display: flex; justify-content: space-between; 1 2 3 display: flex; justify-content: space-around; 1 2 3 display: flex; align-items: flex-end; 1 2 3 display: flex; align-items: center; 1 2 3 display: flex; align-items: baseline; 1 2 3

Kết hợp nhiều giá trị

Ví dụ Kết quả display: flex; flex-direction: row-reverse; justify-content: center; 1 2 3 display: flex; justify-content: space-between; align-items: center; 1 2 3 display: flex; flex-direction: row-reverse; justify-content: flex-end; 1 2 3 display: flex; flex-direction: center; align-items: center; 1 2 3 display: flex; flex-direction: column; 1 2 3 display: flex; flex-direction: column; 1 2 3 display: flex; flex-direction: column; justify-content: center; 1 2 3 display: flex; flex-direction: column; justify-content: space-between; 1 2 3 display: flex; flex-direction: column; justify-content: space-around; 1 2 3 display: flex; flex-direction: column; justify-content: space-around; align-items: center; 1 2 3 display: flex; flex-direction: column-reverse; justify-content: space-around; align-items: center; 1 2 3

Còn rất nhiều giá trị kết hợp khác, các bạn có thể sử dụng công cụ tạo box flex để tìm hiểu thêm nhé.

Có thể bạn quan tâm: EXP nghĩa là gì? Tổng hợp tất cả các ý nghĩa của thuật ngữ EXP

XEM THÊM:  TRIỂN KHAI LÀ GÌ

Vậy là đến đây bài viết về Display flex đã dừng lại rồi. Hy vọng bạn luôn theo dõi và đọc những bài viết hay của chúng tôi trên website Onlineaz.vn

Chúc các bạn luôn gặt hái nhiều thành công trong cuộc sống!

Related Articles

Trả lời

Email của bạn sẽ không được hiển thị công khai.

Check Also
Close
Back to top button