Vùng chứa CSS Flex
Phần tử gốc (Container)
Giống như chúng tôi đã chỉ ra ở chương trước, đây là một flex container (vùng màu xanh) với ba mục flex:
1
2
3
Hộp chứa flex trở nên linh hoạt bằng cách đặt thuộc tính display thành flex :
Các thuộc tính của thùng chứa linh hoạt là:
Thuộc tính hướng linh hoạt
Thuộc tính flex-direction xác định hướng mà vùng chứa muốn xếp chồng các mục flex.
1
2
3
Ví dụ
Giá trị column 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;
}
Ví dụ
Giá trị column-reverse 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;
}
Ví dụ
Giá trị row 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;
}
Ví dụ
Giá trị row-reverse hàng 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 tính flex-wrap xác đị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 flex, để thể hiện rõ hơn thuộc tính flex-wrap .
1
2
3
4
5
6
7
số 8
9
10
11
12
Ví dụ
Giá trị wrap chỉ định rằng các mục linh hoạt sẽ được bọc nếu cần thiết:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Ví dụ
Giá trị nowrap chỉ định rằng các mục flex sẽ không bao bọc (đây là mặc định):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Ví dụ
Giá trị wrap-reverse chỉ định rằng các mục linh hoạt sẽ được bọc nếu cần thiết, theo thứ tự ngược lại:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Thuộc tính dòng chảy linh hoạt
Thuộc tính flex-flow là thuộc tính tốc ký để thiết lập cả thuộc tính flex-direction và flex-wrap .
Thuộc tính biện minh cho nội dung
Thuộc tính justify-content được sử dụng để căn chỉnh các mục linh hoạt:
1
2
3
Ví dụ
Giá trị center căn chỉnh các mục linh hoạt ở giữa vùng chứa:
.flex-container {
display: flex;
justify-content: center;
}
Ví dụ
Giá trị flex-start căn chỉnh các mục flex ở đầu vùng chứa (đây là mặc định):
.flex-container {
display: flex;
justify-content: flex-start;
}
Ví dụ
Giá trị flex-end căn chỉnh các mục flex ở cuối vùng chứa:
.flex-container {
display: flex;
justify-content: flex-end;
}
Ví dụ
Giá trị space-around hiển thị các mục linh hoạt có khoảng trắng trước, giữa và sau các dòng:
.flex-container {
display: flex;
justify-content: space-around;
}
Ví dụ
Giá trị space-between hiển thị các mục linh hoạt có khoảng cách giữa các dòng:
.flex-container {
display: flex;
justify-content: space-between;
}
Thuộc tính căn chỉnh các mục
Thuộc tính align-items được sử dụng để căn chỉnh các mục linh hoạt.
1
2
3
Trong các ví dụ này, chúng tôi sử dụng vùng chứa cao 200 pixel để thể hiện rõ hơn thuộc tính align-items .
Ví dụ
Giá trị center 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;
}
Ví dụ
Giá trị flex-start căn chỉnh các mục flex ở đầu vùng chứa:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Ví dụ
Giá trị flex-end căn chỉnh các mục flex ở cuối vùng chứa:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Ví dụ
Giá trị stretch kéo dài các mục linh hoạt để lấp đầy vùng chứa (đây là mặc định):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Ví dụ
Giá trị baseline căn chỉnh các mục linh hoạt, chẳng hạn như căn chỉnh đường cơ sở của chúng:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Lưu ý: ví dụ này sử dụng cỡ chữ khác nhau để chứng minh rằng các mục được căn chỉnh theo đường cơ sở của văn bản:
1
2
3
Thuộc tính căn chỉnh nội dung
Thuộc tính align-content được sử dụng để căn chỉnh các dòng linh hoạt.
1
2
3
4
5
6
7
số 8
9
10
11
12
Trong các ví dụ này, chúng tôi sử dụng vùng chứa cao 600 pixel, với thuộc tính flex-wrap được đặt thành wrap để thể hiện rõ hơn thuộc tính align-content .
Ví dụ
Giá trị space-between hiển thị các dòng flex có khoảng cách bằng nhau giữa chúng:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}
Ví dụ
Giá trị space-around hiển thị các dòng linh hoạt 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;
}
Ví dụ
Giá trị stretch kéo dài các đường linh hoạt để chiếm không gian còn lại (đây là mặc định):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Ví dụ
Giá trị center hiển thị các đường flex ở giữa vùng chứa:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Ví dụ
Giá trị flex-start 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;
}
Ví dụ
Giá trị flex-end 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;
}
Định tâm hoàn hảo
Trong ví dụ sau, chúng ta sẽ giải quyết một vấn đề về phong cách rất phổ biến: căn giữa hoàn hảo.
GIẢI PHÁP: Đặt cả hai thuộc tính justify-content và align-items thành center và mục flex sẽ được căn giữa một cách hoàn hảo:
Ví 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 |
