Display flex | Hướng dẫn học | Học web chuẩn

display : flex và display : inline-flex và những thuộc tính đi kèm được sử dụng khá nhiều trong việc giải quyết và xử lý những cấu trúc, nếu như trước đây đôi lúc cần Javascript để tương hỗ, thì giờ đây display flex sẽ giúp giải quyết và xử lý nhiều cấu trúc phức tạp một cách thuận tiện .CSS3 ra đời 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 tổng quan những thành phần khối ( block ) một cách thuận tiện, linh động hơn trước .

HTML viết:







1
2
3

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

.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: flexdisplay: inline-flex để hiểu hơn cách hoạt động của các thuộc tính này:

Mục lục nội dung

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 flexdisplay 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 để tìm hiểu và khám phá thêm nhé .

Rate this post