CSS Flexbox
- Trang trước CSS Box Sizing
- Trang tiếp theo CSS Truy vấn truyền thông
Mô-đun布局 Flexbox CSS
Trước khi mô-đun布局 Flexbox (sản xuất) ra đời, các mô hình布局 có sẵn bao gồm bốn loại sau:
- Khối (Block), dùng cho phần (phần) của trang web
- Trong dòng (Inline), dùng cho văn bản
- Bảng, dùng cho dữ liệu bảng hai chiều
- Định vị, dùng để xác định vị trí cụ thể của phần tử
Mô-đun布局 Flexbox, có thể thiết kế cấu trúc布局 linh hoạt và响应 nhanh hơn mà không cần sử dụng nổi hoặc định vị.
Hỗ trợ trình duyệt
Tất cả các trình duyệt hiện đại đều hỗ trợ flexbox Thuộc tính.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Các yếu tố Flexbox
Nếu bạn muốn bắt đầu sử dụng mô hình Flexbox, bạn cần trước tiên định nghĩa khối Flex.
Các phần tử trên biểu thị một hộp flex chứa ba mục flex (vùng màu xanh lá cây).
Mô hình
Hộp flex chứa ba mục flex:
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> </div>
Phần tử cha (hộp):
Bằng cách đặt: display Thuộc tính được thiết lập thành: flexHộp flex sẽ co dãn:
Mô hình
.flex-container {
display: flex;
}
Dưới đây là các thuộc tính hộp flex:
Thuộc tính flex-direction
flex-direction Thuộc tính xác định hướng mà hộp sẽ d堆叠 các mục flex.
Mô hình
column Giá trị thiết lập d堆叠 các mục flex theo hướng dọc (từ trên xuống dưới):
.flex-container {
display: flex;
flex-direction: column;
}
Mô hình
column-reverse Giá trị d堆叠 các mục flex theo hướng dọc (từ dưới lên trên):
.flex-container {
display: flex;
flex-direction: column-reverse;
}
Mô hình
row Giá trị d堆叠 các mục flex theo hướng ngang (từ trái sang phải):
.flex-container {
display: flex;
flex-direction: row;
}
Mô hình
row-reverse Giá trị d堆叠 các mục flex theo hướng ngang (từ phải sang trái):
.flex-container {
display: flex;
flex-direction: row-reverse;
}
Thuộc tính flex-wrap
flex-wrap Thuộc tính quy định có nên cuộn các mục flex hay không.
Ví dụ dưới đây chứa 12 mục flex để minh họa thuộc tính flex-wrap một cách tốt hơn.
Mô hình
wrap Giá trị quy định rằng các mục flex sẽ cuộn khi cần thiết:
.flex-container {
display: flex;
flex-wrap: wrap;
}
Mô hình
nowrap Giá trị quy định rằng không cuộn các mục flex (mặc định):
.flex-container {
display: flex;
flex-wrap: nowrap;
}
Mô hình
wrap-reverse Giá trị quy định rằng nếu cần, các mục flex sẽ cuộn theo thứ tự ngược lại:
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
Thuộc tính flex-flow
flex-flow Thuộc tính này là một viết tắt để đồng thời thiết lập thuộc tính flex-direction và flex-wrap.
Mô hình
.flex-container {
display: flex;
flex-flow: row wrap;
}
Thuộc tính justify-content
justify-content Thuộc tính này được sử dụng để canh chỉnh các mục flex:
Mô hình
center Giá trị sẽ canh chỉnh các mục flex ở giữa hộp:
.flex-container {
display: flex;
justify-content: center;
}
Mô hình
flex-start Giá trị sẽ canh chỉnh các mục flex ở đầu hộp (mặc định):
.flex-container {
display: flex;
justify-content: flex-start;
}
Mô hình
flex-end Giá trị sẽ canh chỉnh các mục flex ở cuối hộp:
.flex-container {
display: flex;
justify-content: flex-end;
}
Mô hình
space-around Giá trị hiển thị các mục flex trước, giữa và sau các hàng có khoảng cách:
.flex-container {
display: flex;
justify-content: space-around;
}
Mô hình
space-between Giá trị hiển thị các mục flex giữa các hàng có khoảng cách:
.flex-container {
display: flex;
justify-content: space-between;
}
Thuộc tính align-items
align-items Thuộc tính này được sử dụng để canh chỉnh theo chiều dọc các mục flex.
Trong những ví dụ này, chúng ta sử dụng hộp có chiều cao 200 pixel để演示 thuộc tính align-items một cách tốt hơn.
Mô hình
center giá trị đối齐 các mục flex ở giữa của container:
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
Mô hình
flex-start giá trị đối齐 các mục flex ở đỉnh của container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
Mô hình
flex-end giá trị đối齐 các mục flex ở đáy của container:
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
Mô hình
stretch giá trị kéo dài các mục flex để lấp đầy容器 (mặc định):
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
Mô hình
baseline giá trị làm các mục flex đối齐 theo đường cơ bản:
.flex-container {
display: flex;
height: 200px;
align-items: baseline;
}
Lưu ý:Ví dụ này sử dụng các font-size khác nhau để演示 các mục đã được đối齐 theo đường cơ bản của văn bản:
Thuộc tính align-content
align-content thuộc tính được sử dụng để đối齐 các đường flex.
Trong các ví dụ này, chúng ta sử dụng容器的 chiều cao 600 pixel và thiết lập thuộc tính flex-wrap thành wrap để演示 thuộc tính align-content tốt hơn.
Mô hình
space-between giá trị hiển thị các đườ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;
}
Mô hình
space-around giá trị hiển thị các đường flex trước, giữa và sau với khoảng trống:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-around;
}
Mô hình
stretch giá trị kéo dài các đường flex để chiếm không gian còn lại (mặc định):
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: stretch;
}
Mô hình
center giá trị hiển thị các đường flex ở giữa của容器:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: center;
}
Mô hình
flex-start giá trị hiển thị các đường flex ở đầu của容器:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-start;
}
Mô hình
flex-end giá trị hiển thị các đường flex ở cuối của容器:
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: flex-end;
}
Đặt chính xác
Trong ví dụ dưới đây, chúng ta sẽ giải quyết một vấn đề về phong cách phổ biến: Đặt chính xác.
Giải pháp: Đặt justify-content và align-items thiết lập thuộc tính làm trung tâm, sau đó các mục flex sẽ được đặt chính xác ở giữa:
Mô hình
.flex-container {
display: flex;
height: 300px;
justify-content: center;
align-items: center;
}
phần tử con (mục)
Các phần tử con của容器的 flex sẽ tự động trở thành các phần tử flex (elastique).
上面的元素代表一个灰色 flex 容器内的四个蓝色 flex 项目。
Mô hình
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
用于弹性项目的属性有：
orderflex-growflex-shrinkflex-basisflexalign-self
order 属性
order 属性规定 flex 项目的顺序。
代码中的首个 flex 项目不必在布局中显示为第一项。
order 值必须是数字，默认值是 0。
Mô hình
order 属性可以改变 flex 项目的顺序：
<div class="flex-container"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div>
flex-grow 属性
flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。
该值必须是数字，默认值是 0。
Mô hình
使第三个弹性项目的增长速度比其他弹性项目快八倍：
<div class="flex-container"> <div style="flex-grow: 1">1</div> <div style="flex-grow: 1">2</div> <div style="flex-grow: 8">3</div> </div>
flex-shrink 属性
flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。
该值必须是数字，默认值是 0。
Mô hình
不要让第三个弹性项目收缩得与其他弹性项目一样多：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-shrink: 0">3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> </div>
flex-basis 属性
flex-basis 属性规定 flex 项目的初始长度。
Mô hình
将第三个弹性项目的初始长度设置为 200 像素：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex-basis: 200px">3</div> <div>4</div> </div>
flex 属性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。
Mô hình
使第三个弹性项目不可增长（0），不可收缩（0），且初始长度为 200 像素：
<div class="flex-container"> <div>1</div> <div>2</div> <div style="flex: 0 0 200px">3</div> <div>4</div> </div>
align-self 属性
align-self 属性规定弹性容器内所选项目的对齐方式。
align-self Thuộc tính sẽ thay thế cách căn chỉnh mặc định được thiết lập bởi thuộc tính align-items của khung.
Trong các ví dụ này, chúng tôi sử dụng khung cao 200 pixel để演示 thuộc tính align-self tốt hơn:
Mô hình
Căn chỉnh phần弹性 thứ ba vào giữa khung:
<div class="flex-container"> <div>1</div> <div>2</div> <div style="align-self: center">3</div> <div>4</div> </div>
Mô hình
Căn chỉnh phần弹性 thứ hai ở đỉnh trên của khung, căn chỉnh phần弹性 thứ ba ở đỉnh dưới của khung:
<div class="flex-container"> <div>1</div> <div style="align-self: flex-start">2</div> <div style="align-self: flex-end">3</div> <div>4</div> </div>
Thư viện hình ảnh tương tác sử dụng Flexbox
Sử dụng Flexbox để tạo thư viện hình ảnh tương tác, thư viện này thay đổi giữa bốn hình ảnh, hai hình ảnh hoặc hình ảnh toàn màn hình dựa trên kích thước màn hình:
Trang web tương tác sử dụng Flexbox
Sử dụng flexbox để tạo trang web tương tác, bao gồm thanh điều hướng và nội dung弹性:
Thuộc tính CSS Flexbox
Bảng dưới đây liệt kê các thuộc tính CSS được sử dụng cùng với flexbox:
| Thuộc tính | Mô tả |
|---|---|
| display | Định nghĩa loại hộp cho các phần tử HTML. |
| flex-direction | Định nghĩa hướng của các phần弹性 trong khung弹性. |
| justify-content | Căn chỉnh các phần弹性 theo chiều ngang khi các phần弹性 không sử dụng hết không gian khả dụng trên trục chính. |
| align-items | Căn chỉnh các phần弹性 theo chiều dọc khi các phần弹性 không sử dụng hết không gian khả dụng trên trục chính. |
| flex-wrap | Định nghĩa liệu các phần弹性 có nên chuyển hàng nếu một đường flex không có đủ không gian để chứa chúng hay không. |
| align-content | Thay đổi hành vi của thuộc tính flex-wrap. Tương tự như align-items, nhưng không căn chỉnh các phần弹性 mà chỉ căn chỉnh đường flex. |
| flex-flow | Thuộc tính viết tắt của flex-direction và flex-wrap. |
| order | Định nghĩa thứ tự của các phần弹性 so với các phần弹性 khác trong cùng khung. |
| align-self | Dùng cho các phần弹性。Bao gồm thuộc tính align-items của khung. |
| flex | Thuộc tính viết tắt của flex-grow, flex-shrink và flex-basis. |
- Trang trước CSS Box Sizing
- Trang tiếp theo CSS Truy vấn truyền thông
