Hướng dẫn display: flex trong css

  • Trang chủ
  • Hướng dẫn học
  • Hướng dẫn học CSS3
  • Display flex

display: flex là gì?

CSS3 ra mắt 2 giá trị mới cho thuộc tính displayflexinline-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: flexdisplay: 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ấu trúc cơ bản

Giá trịVDMô tảflex
display flex: flex;
Giúp các thành phần linh hoạt.
inline-flex
display flex: inline-flex;
Giúp các thành phần linh hoạt dưới dạng các inline.

Cách sử dụng

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:

.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: flexdisplay: 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:

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:

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ị 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é.