HTML viết:
123
CSS viết – khi chưa sử dụng display flex
:
Bạn đang đọc: Hướng dẫn học
.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
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
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ị phối hợp khác, những bạn hoàn toàn có thể sử dụng công cụ tạo box flex để khám phá thêm nhé .
Source: kubet
Category: Tải Phầm Mềm
Leave a Reply