Vùng chứa linh hoạt CSS
Phần tử chính (Vùng chứa)
Giống như chúng ta đã chỉ ra trong chương trước, đây là một vùng chứa linh hoạt (vùng màu xanh lam) với ba mục linh hoạt :
1
2
3
Vùng chứa linh hoạt trở nên linh hoạt bằng cách đặt thuộc displaytính thành
flex:
Thí dụ
.flex-container {
display: flex;
}
Các thuộc tính vùng chứa linh hoạt là:
Thuộc tính hướng linh hoạt
Thuộc flex-directiontính xác định hướng mà vùng chứa muốn xếp chồng các mục linh hoạt.
1
2
3
Thí dụ
Giá columntrị xếp chồng các mục linh hoạt theo chiều dọc (từ trên xuống dưới):
.flex-container {
display: flex;
flex-direction: column;
}
Thí dụ
Giá column-reversetrị xếp chồng các mục linh hoạt theo chiều dọc (nhưng từ dưới lên trên):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Thí dụ
Giá rowtrị xếp chồng các mục linh hoạt theo chiều ngang (từ trái sang phải):
.flex-container {
display: flex;
flex-direction: row;
}
Thí dụ
Giá row-reversetrị xếp chồng các mục linh hoạt theo chiều ngang (nhưng từ phải sang trái):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Thuộc tính flex-wrap
Thuộc flex-wraptính chỉ định xem các mục flex có nên bọc hay không.
Các ví dụ dưới đây có 12 mục linh hoạt, để chứng minh đặc
flex-wraptính tốt hơn.
1
2
3
4
5
6
7
số 8
9
10
11
12
Thí dụ
Giá wraptrị chỉ định rằng các mục linh hoạt sẽ bọc nếu cần thiết:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Thí dụ
Giá nowraptrị chỉ định rằng các mục flex sẽ không bọc (đây là mặc định):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Thí dụ
Giá wrap-reversetrị chỉ định rằng các mục linh hoạt sẽ bọc nếu cần, theo thứ tự ngược lại:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Thuộc tính flex-flow
Thuộc flex-flowtính là một thuộc tính viết tắt để đặt cả thuộc tính
flex-directionvà
flex-wrapthuộc tính.
Thí dụ
.flex-container {
display: flex;
flex-flow: row wrap;
}
Thuộc tính justify-content
Thuộc justify-contenttính được sử dụng để căn chỉnh các mục linh hoạt:
1
2
3
Thí dụ
Giá centertrị căn chỉnh các mục linh hoạt ở tâm của vùng chứa:
.flex-container {
display: flex;
justify-content: center;
}
Thí dụ
Giá flex-starttrị căn chỉnh các mục linh hoạt ở đầu vùng chứa (đây là giá trị mặc định):
.flex-container {
display: flex;
justify-content: flex-start;
}
Thí dụ
Giá flex-endtrị căn chỉnh các mục linh hoạt ở cuối vùng chứa:
.flex-container {
display: flex;
justify-content: flex-end;
}
Thí dụ
Giá space-aroundtrị hiển thị các mục linh hoạt với khoảng trắng trước, giữa và sau các dòng:
.flex-container {
display: flex;
justify-content: space-around;
}
Thí dụ
Giá space-betweentrị hiển thị các mục linh hoạt với khoảng cách giữa các dòng:
.flex-container {
display: flex;
justify-content: space-between;
}
Thuộc tính align-items
Thuộc align-itemstính được sử dụng để căn chỉnh các mục linh hoạt.
1
2
3
Trong những ví dụ này, chúng tôi sử dụng vùng chứa cao 200 pixel để thể hiện thuộc
align-itemstính tốt hơn.
Thí dụ
Giá centertrị căn chỉnh các mục linh hoạt ở giữa vùng chứa:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Thí dụ
Giá flex-starttrị căn chỉnh các mục linh hoạt ở đầu vùng chứa:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Thí dụ
Giá flex-endtrị căn chỉnh các mục linh hoạt ở dưới cùng của vùng chứa:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Thí dụ
Giá stretchtrị kéo dài các mục linh hoạt để lấp đầy vùng chứa (đây là giá trị mặc định):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Thí dụ
Giá baselinetrị căn chỉnh các mục linh hoạt chẳng hạn như các đường cơ sở của chúng căn chỉnh:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Lưu ý: ví dụ sử dụng kích thước phông chữ khác nhau để chứng minh rằng các mục được căn chỉnh theo đường cơ sở văn bản:
1
2
3
Thuộc tính align-content
Thuộc align-contenttính được sử dụng để căn chỉnh các đường flex.
1
2
3
4
5
6
7
số 8
9
10
11
12
Trong những ví dụ này, chúng tôi sử dụng vùng chứa cao 600 pixel, với thuộc
flex-wraptính được đặt thành wrap, để thể hiện thuộc align-contenttính tốt hơn.
Thí dụ
Giá space-betweentrị hiển thị các dòng flex với khoảng cách bằng nhau giữa chúng:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Thí dụ
Giá space-aroundtrị hiển thị các dòng flex có khoảng trắng trước, giữa và sau chúng:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Thí dụ
Giá stretchtrị kéo dài các dòng flex để chiếm không gian còn lại (đây là giá trị mặc định):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Thí dụ
Giá centertrị hiển thị hiển thị các đường uốn cong ở giữa vùng chứa:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Thí dụ
Giá flex-starttrị hiển thị các dòng flex ở đầu vùng chứa:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Thí dụ
Giá flex-endtrị hiển thị các dòng flex ở cuối vùng chứa:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Căn giữa hoàn hảo
Trong ví dụ sau, chúng ta sẽ giải quyết một vấn đề về kiểu rất phổ biến: căn giữa hoàn hảo.
GIẢI PHÁP: Đặt cả thuộc tính justify-contentvà align-itemsthuộc tính thành
center, và mục flex sẽ được căn giữa một cách hoàn hảo:
Thí dụ
.flex-container {
display: flex;
height: 300px;
justify-content:
center;
align-items: center;
}
Thuộc tính vùng chứa CSS Flexbox
Bảng sau liệt kê tất cả các thuộc tính CSS Flexbox Container:
| Property | Description |
|---|---|
| align-content | Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines |
| align-items | Vertically aligns the flex items when the items do not use all available space on the cross-axis |
| display | Specifies the type of box used for an HTML element |
| flex-direction | Specifies the direction of the flexible items inside a flex container |
| flex-flow | A shorthand property for flex-direction and flex-wrap |
| flex-wrap | Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line |
| justify-content | Horizontally aligns the flex items when the items do not use all available space on the main-axis |