Hướng dẫn flex css
display: flex là gì?CSS3 ra mắt 2 giá trị mới cho thuộc tính
Cấu trúc cơ bản
Cách sử dụngHTML viết:
CSS viết - khi chưa sử dụng .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: Bây giờ ta sẽ lần lượt áp dụng 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: Ta thấy 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: Ta thấy Điểm mạnh của 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 {
Viết ở chỗ này ^^
} Kết hợp 1 giá trị
Kết hợp nhiều giá trị
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é. |