Phương pháp định vị các phần tử trong ngăn xếp ngang hoặc dọc. Hỗ trợ bao gồm tất cả các thuộc tính có tiền tố là
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
1, cũng như
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
2,
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
3,
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
4,
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
5,
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
6,
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
7 và
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
8 Nhanh chóng quản lý bố cục, căn chỉnh và định cỡ của các cột lưới, điều hướng, thành phần, v.v. với bộ tiện ích flexbox đáp ứng đầy đủ. Đối với các triển khai phức tạp hơn, CSS tùy chỉnh có thể cần thiết
Hộp flex là hộp linh hoạt được thiết kế để tạo bố cục một chiều trong css. Một chiều có nghĩa là flexbox có thể tạo bố cục theo một chiều cùng một lúc. Đối với bố cục hai chiều, hãy sử dụng Lưới CSS có thể xử lý cả hàng và cột
Màn hình flex được sử dụng để xây dựng flexbox. Flex có thể xây dựng bố cục một chiều tốt hơn bố cục dựa trên float
Lợi thế của việc sử dụng flexbox?
- Thiết kế bố trí tốt hơn
- Lợi thế của bố trí linh hoạt
- Hỗ trợ trình duyệt IE 10 trở lên
- Tùy chọn chiều cao và chiều rộng tự động có sẵn
- Dễ dàng thay đổi hướng của cột flex
Đối với IE 9 trở xuống, vui lòng sử dụng bố cục dựa trên css float
Thuộc tính hộp linh hoạt
Flex là giá trị của màn hình css. Bằng cách sử dụng flex hiển thị trong các phần tử cha, các phần tử con sẽ tự động căn chỉnh như cột hoặc hàng với chiều rộng tự động và chiều cao tự động
Hộp linh hoạt CSSThuộc tính của flex container
- hiển thị [ flex hoặc inline-flex ]
- hướng uốn
- uốn dẻo
- dòng chảy linh hoạt
- biện minh cho nội dung
- sắp xếp các mục
- căn chỉnh nội dung
Thuộc tính của các mục linh hoạt [con của vùng chứa]
- trật tự
- uốn cong
- uốn cong
- flex-cơ bản
- uốn cong
- tự sắp xếp
Thuộc tính của flex container
Màn hình linh hoạt
Display flex là thuộc tính của flex container để sử dụng flexbox. Thuộc tính CSS Display có thể có giá trị flex hoặc inline-flex. Bằng cách sử dụng flex hiển thị hoặc inline-flex cho vùng chứa chính, phần tử con sẽ tự động kích hoạt ngữ cảnh flex
Thay đổi màn hình flex
Chặn Linh hoạt
Mục 1
Mục 2
Mục 3
mục 4
.flex-container{
display: flex;
}
.flex-item{
padding:10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
Hướng linh hoạt
Thuộc tính Flex Direction được cấp cho bộ chứa flex để thay đổi hướng của các mục flex. Theo mặc định, hướng flex là hàng
Giá trị Flex Directions
- hàng [mặc định]
- đảo ngược hàng
- cột
- đảo ngược cột
Thay đổi hướng Flex
hàng đảo hàng cột đảo cột
Mục 1
Mục 2
Mục 3
mục 4
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
Flex Wrap
Các mục linh hoạt theo mặc định sẽ nằm trong một hàng. bọc flex được sử dụng để cho phép các mục được bọc trong dòng tiếp theo hoặc bọc ngược lại
Giá trị Flex Wrap
- nowrap [mặc định]
- bọc [ bọc trong dòng tiếp theo]
- quấn ngược [nhiều dòng nhưng ngược từ dưới lên trên]
Thay đổi bọc Flex
nowrap bọc bọc đảo ngược
Mục 1
Mục 2
Mục 3
mục 4
mục 5
mục 6
mục 7
mục 8
mục 9
mục 10
mục 11
mục 12
mục 13
mục 14
mục 15
mục 16
.flex-container{
display:flex;
flex-direction: row;
flex-wrap: nowrap;
-ms-flex-wrap:nowrap;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Luồng linh hoạt
luồng flex là cách viết tắt của các thuộc tính flex-direction và flex-wrap. Giá trị mặc định là row nowrap
Mục 1
Mục 2
Mục 3
mục 4
.flex-container{
display:flex;
flex-flow: column wrap;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
Căn chỉnh nội dung
thuộc tính justify-content được sử dụng để biện minh cho nội dung trong trục chính. Điều này có thể điều chỉnh các mục sang trái, giữa, phải hoặc thêm khoảng trắng ở giữa
giá trị nội dung biện minh
- khởi động linh hoạt [mặc định]
- kết thúc uốn cong
- trung tâm
- không gian giữa
- không gian xung quanh
- không gian đều
Thay đổi nội dung biện minh
flex-start flex-end không gian trung tâm-giữa không gian-xung quanh không gian-đồng đều
Mục 1
Mục 2
Mục 3
.flex-container{
display:flex;
flex-flow:row wrap;
justify-content: flex-start;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2 bigger
Item 3
Căn chỉnh các mục
Thuộc tính Align-items xác định hành vi của cách mục linh hoạt được bố trí trên trục ngang. Theo mặc định, giá trị được kéo dài
Giá trị của align-item
- căng ra
- khởi động linh hoạt
- kết thúc uốn cong
- trung tâm
- đường cơ sở
kéo dài flex-bắt đầu flex-end đường cơ sở trung tâm
1
2
3
.flex-container{
display:flex;
flex-flow:row wrap;
align-items: stretch;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px;
}
1
2
3
Thuộc tính của các mục linh hoạt
trật tự
thuộc tính order của mục flex đặt thứ tự chúng xuất hiện trong vùng chứa chính. Thứ tự mặc định là 0. giá trị của đơn đặt hàng luôn luôn là một con số
Theo mặc định, tất cả các mục flex đều theo thứ tự luồng tài liệu
1
2
3
.flex-container{
display:flex;
flex-flow:row wrap;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px;
order:0;
}
1
2
3
uốn cong
thuộc tính flex-grow của mục flex xác định khả năng tăng trưởng. Giá trị mặc định cho tất cả các mục linh hoạt là 0
Flex-grow 0 có nghĩa là chiều rộng của mục flex chỉ theo nội dung
Flex-grow 1 có nghĩa là chiều rộng của vật phẩm linh hoạt sẽ được phân bổ đều cho tất cả các vật phẩm
phát triển linh hoạt. 0 1
1
2
3
.flex-container{
display:flex;
flex-flow:row wrap;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px;
flex-grow: 0;
}
1
2
3
1
2
3
________số 8co giãn linh hoạt
Thuộc tính Flex Shrink của mục flex xác định khả năng co lại nếu cần. Giá trị mặc định của flex-shrink là 1. Giá trị có thể là bất kỳ giá trị dương nào hoặc 0
co giãn linh hoạt. 0 1
Cột
Cột
Cột
Cột
Cột
Cột
Cột
Cột
.flex-container{
display:flex;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px;
flex-shrink: 1;
}
Column
Column
Column
Column
Column
Column
Column
Column
Cơ sở linh hoạt
thuộc tính flex-basis của mục flex xác định chiều rộng mặc định của mục trước trong %age, px, em hoặc rem. Giá trị mặc định của flex-basis là auto. Chúng ta có thể gán giá trị cho flex-shrink dựa trên tỷ lệ phần trăm được yêu cầu. Ví dụ: 20% có nghĩa là chiều rộng của mục sẽ là 20% và tổng chiều rộng của các mục khác sẽ là 80%
1
2
.flex-container{
display:flex;
flex-direction: row;
}
.flex-item{
padding:0 10px;
border: 1px solid #ccc;
margin: 5px
}
Item 1
Item 2
Item 3
Item 4
0uốn cong
flex là viết tắt của flex-grow, flex-shrink và flex-basis. Giá trị mặc định của flex là 0 1 0%. Giá trị đầu tiên, tôi. e flex-grow là bắt buộc và hai cái khác là tùy chọn
CSS flex hiển thị là gì?
Hiển thị flex là thuộc tính của bộ chứa flex để sử dụng flexbox . Thuộc tính CSS Display có thể có giá trị flex hoặc inline-flex. Bằng cách sử dụng flex hiển thị hoặc inline-flex cho vùng chứa chính, phần tử con sẽ tự động kích hoạt ngữ cảnh flex.
Màn hình flex hoạt động như thế nào?
Vùng chứa linh hoạt . Các mục hiển thị trong một hàng [mặc định của thuộc tính flex-direction là row ] Các mục bắt đầu từ cạnh bắt đầu của trục chính Các mục không kéo dài trên kích thước chính, nhưng có thể co lại Các mục sẽ kéo dài để lấp đầy kích thước của trục chéo Thuộc tính flex-basis được đặt thành tự động
Màn hình flex hay lưới nào tốt hơn?
Lưới là cách tốt nhất cho bố cục hai chiều với nhiều thành phần cần được định vị chính xác tương đối với nhau . Flexbox tốt hơn cho bố cục một chiều hoặc một dòng, nơi bạn chỉ cần sắp xếp một loạt các thành phần theo một cách nhất định.
CSS linh hoạt 50% là gì?
flex-basis xác định kích thước mặc định của một phần tử trước khi phân phối không gian còn lại . Vì vậy, trong trường hợp này, bạn đã xác định tất cả trẻ em` thành 50%.
Chủ Đề