Các khối Css flex có cùng chiều rộng. Ví dụ về bố cục Flex Tạo bố cục thích ứng
Nói tóm lại, bố cục với Flexbox mang lại cho chúng ta giải pháp đơn giản một khi nhiệm vụ khó khăn. Ví dụ: khi bạn cần căn chỉnh một phần tử theo chiều dọc hoặc nhấn chân trang xuống cuối màn hình hoặc chỉ cần chèn một số khối vào một hàng để chúng chiếm hết không gian trống. Các vấn đề tương tự có thể được giải quyết mà không cần flex. Nhưng theo quy luật, những giải pháp này giống như “nạng” hơn - các kỹ thuật sử dụng CSS cho các mục đích khác với mục đích dự định của chúng. Trong khi đó với flexbox, những tác vụ như vậy được giải quyết chính xác như dự định của mô hình flex.
Mô-đun bố cục hộp linh hoạt CSS (mô-đun CSS dành cho bố cục với các khối linh hoạt), gọi tắt là flexbox, được tạo ra để loại bỏ những thiếu sót khi tạo ra nhiều thiết kế HTML khác nhau, bao gồm cả những thiết kế phù hợp với các chiều rộng và chiều cao khác nhau, đồng thời làm cho bố cục trở nên hợp lý và đơn giản . Và một cách tiếp cận hợp lý, như một quy luật, hoạt động ở những nơi không ngờ tới, nơi kết quả chưa được kiểm tra - logic là tất cả!
Flexbox cho phép bạn kiểm soát một cách tinh tế nhiều tham số của các phần tử bên trong vùng chứa: hướng, thứ tự, chiều rộng, chiều cao, căn chỉnh dọc và ngang, phân bổ không gian trống, kéo dài và nén các phần tử.
Kiến thức cơ bản
FlexBox bao gồm một Container và các Mục của nó (các phần tử linh hoạt).
Để kích hoạt flexbox, bất cứ ai phần tử HTML chỉ cần gán css thuộc tính hiển thị:uốn cong; hoặc hiển thị:inline-flex; .
Sau khi bật thuộc tính flex, hai trục được tạo bên trong vùng chứa: trục chính và trục ngang (vuông góc (⊥), trục chéo). Tất cả các phần tử lồng nhau (ở cấp độ đầu tiên) được sắp xếp theo trục chính. Theo mặc định, trục chính nằm ngang và hướng từ trái sang phải (>) và trục chéo tương ứng theo chiều dọc và hướng từ trên xuống dưới (v).
Trục chính và trục chéo có thể hoán đổi cho nhau, khi đó các phần tử sẽ được đặt từ trên xuống dưới (v) và khi không còn vừa chiều cao nữa, chúng sẽ di chuyển từ trái sang phải (>) - tức là các trục chỉ hoán đổi vị trí . Trong trường hợp này, điểm bắt đầu và kết thúc của việc sắp xếp các phần tử không thay đổi - chỉ có hướng (trục) thay đổi! Đây là lý do tại sao bạn cần tưởng tượng các trục bên trong vùng chứa. Tuy nhiên, không nên nghĩ rằng có một số trục “vật lý” và chúng ảnh hưởng đến điều gì đó. Trục ở đây chỉ là hướng chuyển động của các phần tử bên trong container. Ví dụ: nếu chúng ta chỉ định căn chỉnh các phần tử vào tâm của trục chính và sau đó thay đổi hướng của trục chính này, thì căn chỉnh sẽ thay đổi: các phần tử ở giữa theo chiều ngang, nhưng trở thành ở giữa theo chiều dọc... Xem ví dụ.
Một tính năng quan trọng khác của Flexbox là sự hiện diện của các hàng theo hướng ngang. Để hình dung và hiểu chúng, chúng ta hãy tưởng tượng: có một trục hoành chính, có nhiều phần tử và chúng không “vừa” vào thùng chứa nên chuyển sang hàng khác. Những thứ kia. một thùng chứa trông như thế này: một thùng chứa có hai hàng bên trong, mỗi hàng chứa một số phần tử. Được giới thiệu? Bây giờ hãy nhớ rằng chúng ta có thể căn chỉnh không chỉ các phần tử mà còn cả các hàng! Cách thức hoạt động của tính năng này được thấy rõ trong ví dụ về thuộc tính. Và đây là những gì nó trông giống như sơ đồ:
![](https://i0.wp.com/wp-kama.ru/wp-content/uploads/2017/02/ryady-elementy-kontejnera.png)
Các thuộc tính CSS có thể ảnh hưởng đến mô hình bố cục: float , clear , Vertical-align , các cột không hoạt động trong thiết kế linh hoạt - chúng sử dụng một mô hình bố cục khác và các thuộc tính CSS này đơn giản bị bỏ qua...
Thuộc tính CSS của Flexbox
Flexbox chứa khác nhau quy tắc css và để kiểm soát toàn bộ thiết kế linh hoạt. Một số cần được áp dụng cho vùng chứa chính và một số khác cho các phần tử của vùng chứa này.
Đối với thùng chứa
trưng bày:Kích hoạt thuộc tính flex cho phần tử. Thuộc tính này bao gồm chính phần tử đó và các phần tử lồng nhau của nó: chỉ con cháu cấp một mới bị ảnh hưởng - chúng sẽ trở thành các phần tử của vùng chứa linh hoạt.
- uốn cong- phần tử trải dài toàn bộ chiều rộng của nó và có toàn bộ không gian giữa các khối xung quanh. Ngắt dòng xảy ra ở đầu và cuối khối.
- nội tuyến-flex- một phần tử được bao bọc xung quanh các phần tử khác. Trong trường hợp này, phần bên trong của nó được định dạng là phần tử khối và bản thân phần tử đó được định dạng là nội tuyến.
flex và inline-flex khác nhau ở chỗ chúng tương tác khác nhau với các phần tử xung quanh, tương tự như display:block và display:inline-block .
hướng linh hoạt:Thay đổi hướng trục chính của container. Trục ngang thay đổi tương ứng.
- hàng (mặc định)- hướng của các phần tử từ trái sang phải (>)
- cột- hướng của các phần tử từ trên xuống dưới (v)
- đảo ngược hàng- hướng của các phần tử từ phải sang trái (<)
- đảo ngược cột- hướng của các phần tử từ dưới lên trên (^)
Kiểm soát việc chuyển các phần tử không vừa với vùng chứa.
- nowrap (mặc định)- các phần tử lồng nhau được đặt trong một hàng (với Direction=row) hoặc trong một cột (với Direction=column) bất kể chúng có vừa với vùng chứa hay không.
- bọc- bao gồm việc di chuyển các phần tử sang hàng tiếp theo nếu chúng không vừa với vùng chứa. Điều này cho phép chuyển động của các phần tử dọc theo trục ngang.
- bọc-đảo ngược- giống như quấn, chỉ có điều chuyển sẽ không xuống mà lên (theo hướng ngược lại).
Kết hợp cả thuộc tính flex-direction và flex-wrap. Chúng thường được sử dụng cùng nhau nên thuộc tính flex-flow được tạo ra để giúp viết ít mã hơn.
flex-flow chấp nhận giá trị của hai thuộc tính này, cách nhau bằng dấu cách. Hoặc bạn có thể chỉ định một giá trị duy nhất cho bất kỳ thuộc tính nào.
/* chỉ flex-direction */ flex-flow: row; flex-flow: đảo ngược hàng; dòng chảy linh hoạt: cột; flex-flow: đảo ngược cột; /* chỉ flex-wrap */ flex-flow: nowrap; dòng chảy linh hoạt: bọc; flex-flow: bọc-đảo ngược; /* cả hai giá trị cùng một lúc: flex-direction và flex-wrap */ flex-flow: row nowrap; flex-flow: bọc cột; flex-flow: bọc-đảo ngược cột; biện minh-nội dung:
Căn chỉnh các phần tử dọc theo trục chính: nếu hướng=hàng thì theo chiều ngang và nếu hướng=cột thì theo chiều dọc.
- khởi động linh hoạt (mặc định)- các phần tử sẽ bắt đầu lại từ đầu (có thể còn một khoảng trống ở cuối).
- đầu uốn cong- các phần tử được căn chỉnh ở cuối (khoảng trắng sẽ vẫn ở đầu)
- trung tâm- ở giữa (khoảng trống sẽ vẫn ở bên trái và bên phải)
- khoảng cách giữa- các phần tử ngoài cùng được ép vào các cạnh (khoảng cách giữa các phần tử được phân bố đều)
- không gian xung quanh- không gian trống được phân bổ đều giữa các phần tử (các phần tử ngoài cùng không bị ép vào các cạnh). Khoảng cách giữa cạnh của vùng chứa và các phần tử bên ngoài sẽ bằng một nửa khoảng cách giữa các phần tử ở giữa hàng.
- không gian đều
Căn chỉnh các hàng chứa các phần tử dọc theo trục ngang. Tương tự như biện minh-nội dung chỉ dành cho trục đối diện.
Những thứ kia. nếu flex-direction: row thì thuộc tính này sẽ căn chỉnh các hàng vô hình theo chiều dọc (¦). Điều quan trọng cần lưu ý ở đây là chiều cao của khối phải được đặt một cách cứng nhắc và phải lớn hơn chiều cao của các hàng, nếu không chính các hàng sẽ kéo dài vùng chứa và mọi sự căn chỉnh của chúng trở nên vô nghĩa, vì không có khoảng trống giữa chúng... Nhưng khi flex-direction: columns thì các hàng di chuyển theo chiều ngang (>) và chiều rộng của vùng chứa hầu như luôn lớn hơn chiều rộng của các hàng và việc căn chỉnh các hàng ngay lập tức có ý nghĩa...
Thuộc tính này hiếm khi cần thiết và thường được sử dụng bởi các mục căn chỉnh (xem bên dưới).
- kéo dài (mặc định)- các hàng kéo dài để lấp đầy hàng
- khởi động linh hoạt- các hàng được nhóm ở đầu vùng chứa (có thể còn một khoảng trống ở cuối).
- đầu uốn cong- các hàng được nhóm ở dưới cùng của vùng chứa (khoảng trắng sẽ vẫn ở đầu)
- trung tâm- các hàng được nhóm ở giữa vùng chứa (khoảng trống sẽ vẫn ở các cạnh)
- khoảng cách giữa- các hàng bên ngoài ép vào mép (khoảng cách giữa các hàng được phân bổ đều)
- không gian xung quanh- không gian trống được phân bổ đều giữa các hàng (các phần tử ngoài cùng không bị ép vào các cạnh). Khoảng cách giữa cạnh của vùng chứa và các phần tử bên ngoài sẽ bằng một nửa khoảng cách giữa các phần tử ở giữa hàng.
- không gian đều- giống như space-around, chỉ có khoảng cách giữa các phần tử bên ngoài và các cạnh của thùng chứa là bằng khoảng cách giữa các phần tử.
Căn chỉnh các phần tử dọc theo trục ngang trong một hàng (hàng vô hình). Những thứ kia. Bản thân các hàng được căn chỉnh thông qua Align-content và các phần tử bên trong các hàng (hàng) này được căn chỉnh thông qua các mục căn chỉnh và tất cả dọc theo trục ngang. Không có sự phân chia như vậy dọc theo trục chính, không có khái niệm về hàng và phần tử được căn chỉnh thông qua just-content .
- kéo dài (mặc định)- các phần tử được kéo dài để lấp đầy dòng
- khởi động linh hoạt- phần tử được ép về đầu hàng
- đầu uốn cong- phần tử được ép xuống cuối hàng
- trung tâm- Các phần tử được căn chỉnh về giữa hàng
- đường cơ sở- các phần tử được căn chỉnh theo đường cơ sở của văn bản
Đối với các phần tử chứa
phát triển linh hoạt:Đặt hệ số phóng đại của phần tử khi có không gian trống trong vùng chứa. Phát triển linh hoạt mặc định: 0 tức là không có phần tử nào sẽ phát triển và lấp đầy không gian trống trong vùng chứa.
Tăng trưởng linh hoạt mặc định: 0
- Nếu bạn chỉ định flex-grow: 1 cho tất cả các phần tử thì tất cả chúng sẽ giãn ra như nhau và lấp đầy tất cả không gian trống trong vùng chứa.
- Nếu bạn chỉ định flex-grow: 1 cho một trong các phần tử, thì nó sẽ lấp đầy tất cả không gian trống trong vùng chứa và việc căn chỉnh thông qua unity-content sẽ không còn hoạt động: không có không gian trống, không có gì để căn chỉnh...
- Nếu một trong số chúng có flex-grow:2 thì nó sẽ lớn gấp 2 lần so với tất cả những cái khác
- Nếu tất cả các hộp flex bên trong thùng chứa flex có flex-grow:3 thì chúng sẽ có cùng kích thước
- Nếu một trong số chúng có flex-grow:12 thì nó sẽ lớn hơn 4 lần so với tất cả những cái khác
Làm thế nào nó hoạt động? Giả sử một vùng chứa có chiều rộng 500px và chứa hai phần tử, mỗi phần tử có chiều rộng cơ sở là 100px. Điều này có nghĩa là còn lại 300 pixel trống trong vùng chứa. Bây giờ, nếu chúng ta chỉ định flex-grow: 2; và flex-grow: 1 thứ hai; , khi đó các khối sẽ chiếm toàn bộ chiều rộng có sẵn của vùng chứa và chiều rộng của khối đầu tiên sẽ là 300px và khối thứ hai là 200px. Điều này được giải thích là do 300px không gian trống có sẵn trong vùng chứa được phân bổ giữa các phần tử theo tỷ lệ 2:1, +200px cho phần đầu tiên và +100px cho phần thứ hai.
Lưu ý: giá trị có thể được chỉ định số phân số, ví dụ: 0,5 - flex-grow:0,5
co lại:Đặt hệ số giảm của phần tử. Thuộc tính này ngược lại với flex-grow và xác định cách phần tử sẽ co lại nếu không còn chỗ trống trong vùng chứa. Những thứ kia. thuộc tính bắt đầu hoạt động khi tổng kích thước của tất cả các phần tử lớn hơn kích thước của vùng chứa.
Thu nhỏ mặc định: 1
Giả sử vùng chứa rộng 600px và chứa hai phần tử, mỗi phần tử rộng 300px - flex-basis:300px; . Những thứ kia. hai phần tử lấp đầy hoàn toàn vùng chứa. Cung cấp phần tử đầu tiên flex-shrink: 2; và flex-shrink thứ hai: 1; . Bây giờ hãy giảm chiều rộng của vùng chứa xuống 300px, tức là. các phần tử phải co lại 300px để vừa với bên trong vùng chứa. Chúng sẽ co lại theo tỷ lệ 2:1, tức là khối đầu tiên sẽ co lại 200px và khối thứ hai là 100px và kích thước phần tử mới sẽ trở thành 100px và 200px.
Lưu ý: bạn có thể chỉ định số phân số trong giá trị, ví dụ: 0,5 - flex-shrink:0,5
cơ sở linh hoạt:Đặt chiều rộng cơ sở của phần tử - chiều rộng trước khi tính toán các điều kiện khác ảnh hưởng đến chiều rộng của phần tử. Giá trị có thể được chỉ định bằng px, %, em, rem, v.v. Chiều rộng cuối cùng sẽ phụ thuộc vào chiều rộng cơ sở và các giá trị flex-grow, flex-shrink và nội dung bên trong khối. Ở chế độ tự động, phần tử có chiều rộng cơ sở tương ứng với nội dung bên trong nó.
Mặc định: tự động
Đôi khi có thể hữu ích khi đặt chiều rộng của một phần tử một cách cứng nhắc thông qua thuộc tính chiều rộng quen thuộc. Ví dụ: chiều rộng: 50%; có nghĩa là phần tử bên trong vùng chứa sẽ chính xác là 50%, nhưng các thuộc tính flex-grow và flex-shrink vẫn sẽ hoạt động. Điều này có thể cần thiết khi phần tử bị kéo dài bởi nội dung bên trong nó, nhiều hơn mức được chỉ định trong flex-basis... Ví dụ.
flex-basis sẽ "cứng nhắc" nếu bạn chỉ định độ giãn và co bằng 0: flex-basis:200px; flex-tăng trưởng: 0; flex-thu nhỏ: 0; - bạn có thể viết ngắn gọn như thế này: flex:0 0 200px; .
flex: (tăng cơ sở thu nhỏ)Mục nhập ngắn ba thuộc tính: flex-grow flex-shrink flex-basis .
Mặc định: flex: 0 1 tự động
Tuy nhiên, bạn có thể chỉ định một hoặc hai giá trị:
Flex: không có; /* 0 0 tự động */ /* số */ flex: 2; /* flex-grow (flex-basis tiến tới 0) */ /* không phải là số */ flex: 10em; /* cơ sở flex: 10em */ flex: 30px; /* cơ sở flex: 30px */ flex: auto; /* flex-basis: auto */ flex: nội dung; /* flex-basis: nội dung */ flex: 1 30px; /* flex-grow và flex-basis */ flex: 2 2; /* flex-grow và flex-shrink (flex-basis tiến tới 0) */ flex: 2 2 10%; /* flex-grow và flex-shrink và flex-basis */align-self:
Cho phép bạn thay đổi thuộc tính căn chỉnh các mục, chỉ cho một phần tử duy nhất.
Mặc định: từ vùng chứa các mục căn chỉnh
- kéo dài- phần tử được kéo dài để lấp đầy dòng
- khởi động linh hoạt- phần tử được nhấn về đầu dòng
- đầu uốn cong- phần tử được nhấn đến cuối dòng
- trung tâm- phần tử được căn chỉnh về giữa dòng
đường cơ sở- phần tử được căn chỉnh theo đường cơ sở của văn bản
Cho phép bạn thay đổi thứ tự (vị trí, vị trí) của một phần tử trong hàng chung.
Mặc định: thứ tự: 0
Theo mặc định, các phần tử có order: 0 và được đặt theo thứ tự xuất hiện trong mã HTML và hướng của hàng. Nhưng nếu bạn thay đổi giá trị của thuộc tính order thì các phần tử sẽ được sắp xếp theo thứ tự giá trị: -1 0 1 2 3 ... . Ví dụ: nếu bạn chỉ định thứ tự: 1 cho một trong các phần tử thì tất cả các số 0 sẽ đi trước và sau đó là phần tử có 1.
Ví dụ: bằng cách này, bạn có thể di chuyển phần tử đầu tiên đến cuối mà không thay đổi hướng chuyển động của các phần tử còn lại hoặc mã HTML.
Ghi chú
Sự khác biệt giữa cơ sở flex và chiều rộng là gì?
Dưới đây là những khác biệt quan trọng giữa cơ sở linh hoạt và chiều rộng/chiều cao:
- Khi sử dụng thuộc tính flex, 3 giá trị (flex-grow/flex-shrink/flex-basis) có thể được kết hợp và viết ngắn gọn, nhưng để tăng hoặc thu nhỏ chiều rộng bạn cần phải viết riêng. Ví dụ: flex:0 0 50% == chiều rộng:50%; flex-thu nhỏ: 0; . Đôi khi nó chỉ là bất tiện.
cơ sở flex chỉ hoạt động cho trục chính. Điều này có nghĩa là với flex-direction:row flex-basis sẽ kiểm soát chiều rộng và với flex-direction:column sẽ kiểm soát chiều cao. .
cơ sở flex chỉ áp dụng cho các phần tử flex. Điều này có nghĩa là nếu bạn tắt tính năng linh hoạt cho một vùng chứa, thuộc tính này sẽ không có hiệu lực.
Các phần tử vùng chứa tuyệt đối không tham gia vào cấu trúc flex... Điều này có nghĩa là flex-basis không ảnh hưởng đến các phần tử flex của vùng chứa nếu chúng là vị trí tuyệt đối: tuyệt đối. Họ sẽ cần chỉ định chiều rộng/chiều cao.
Nếu có thể, vẫn thích cơ sở linh hoạt hơn. Chỉ sử dụng chiều rộng khi cơ sở linh hoạt không phù hợp.
Sự khác biệt giữa cơ sở linh hoạt và chiều rộng - lỗi hay tính năng?
Nội dung bên trong phần tử flex sẽ mở rộng nó và không thể mở rộng ra ngoài nó, trừ khi chiều rộng của phần tử được đặt thông qua width hoặc max-width . flex-basis sẽ không hoạt động được ở đây... Xem ví dụ:
Ví dụ về bố cục linh hoạt
Không nơi nào trong các ví dụ có tiền tố được sử dụng để tương thích giữa nhiều trình duyệt. Tôi đã làm điều này để dễ đọc css. Vì vậy, bạn cần xem xét các ví dụ ít nhiều gần đây phiên bản chrome hoặc firefox.
#1 Ví dụ đơn giản về căn chỉnh dọc và ngang
Hãy bắt đầu lại từ đầu ví dụ đơn giản- căn chỉnh theo chiều dọc và chiều ngang đồng thời và ở bất kỳ chiều cao khối nào, kể cả cao su.
Hoặc như thế này, không có khối bên trong:
#1.2 Tách biệt (ngắt) giữa các phần tử khối flex
Để sắp xếp các phần tử chứa dọc theo các cạnh và chọn ngẫu nhiên một phần tử sau đó sẽ có dấu ngắt, bạn cần sử dụng thuộc tính ký quỹ với giá trị tự động.
#2 Menu thích ứng trên flex
Hãy tạo một menu ở đầu trang. Trên màn hình rộng, nó phải ở bên phải. Trung bình, căn chỉnh ở giữa. Và trên phần nhỏ, mỗi phần tử phải nằm trên một dòng mới.
#3 Thích ứng 3 cột
Ví dụ này cho thấy cách tạo 3 cột một cách nhanh chóng và thuận tiện, khi thu hẹp sẽ biến thành 2 rồi thành 1.
Xin lưu ý rằng điều này có thể được thực hiện mà không cần sử dụng phương tiện truyền thông quy tắc, mọi thứ đều linh hoạt.
Truy cập jsfiddle.net và thay đổi độ rộng của phần “kết quả”
#4 Khối thích ứng trên flex
Giả sử chúng ta cần xuất ra 3 khối, một khối lớn và hai khối nhỏ. Đồng thời, các khối cần phải thích ứng với màn hình nhỏ. Chúng tôi làm:
Truy cập jsfiddle.net và thay đổi độ rộng của phần “kết quả”
#5 Thư viện với tính linh hoạt và chuyển tiếp
Ví dụ này cho thấy bạn có thể tạo ra một chiếc đàn accordion dễ thương bằng hình ảnh bằng cách sử dụng flex nhanh như thế nào. Hãy chú ý đến thuộc tính chuyển tiếp cho flex.
#6 Flex to Flex (chỉ là một ví dụ)
Nhiệm vụ là tạo ra một khối linh hoạt. Sao cho phần đầu văn bản trong mỗi khối nằm trên cùng một dòng theo chiều ngang. Những thứ kia. Khi chiều rộng thu hẹp, các khối sẽ tăng chiều cao. Điều cần thiết là hình ảnh phải ở trên cùng, nút luôn ở dưới cùng và văn bản ở giữa bắt đầu dọc theo một đường ngang...
Để giải quyết vấn đề này, bản thân các khối được kéo giãn bằng flex và đặt ở chiều rộng tối đa có thể. Mỗi khối bên trong cũng là một cấu trúc linh hoạt, với trục xoay flex-direction:column; và phần tử ở giữa (nơi chứa văn bản) được kéo dài flex-grow:1; để lấp đầy tất cả không gian trống, đây là cách đạt được kết quả - văn bản bắt đầu bằng một dòng...
Thêm ví dụ
Hỗ trợ trình duyệt - 97%
Tất nhiên, không có sự hỗ trợ đầy đủ, nhưng tất cả các trình duyệt hiện đại đều hỗ trợ thiết kế flexbox. Một số vẫn yêu cầu tiền tố. Để có bức tranh thực tế, hãy xem caniuse.com và thấy rằng 96% trình duyệt được sử dụng ngày nay sẽ hoạt động mà không cần tiền tố và 97% có tiền tố - và đây là một chỉ báo tuyệt vời cho thấy việc sử dụng hoàn toàn flexbox.
Để biết những tiền tố nào có liên quan hiện nay (tháng 2 năm 2017), tôi sẽ đưa ra một ví dụ về tất cả các quy tắc linh hoạt với với các tiền tố cần thiết:
/* Vùng chứa */ .flex ( display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; display: -webkit-inline-box; display: -webkit-inline-flex ; hiển thị: -ms-inline-flexbox; hiển thị: inline-flex; -webkit-box-orient: dọc; -webkit-box-direction: bình thường; -webkit-flex-direction: cột; -ms-flex-direction: cột; flex-direction: cột; -webkit-flex-wrap: bọc; -ms-flex-wrap: bọc; flex-wrap: bọc; -webkit-flex-flow: bọc cột; -ms-flex-flow: cột bọc; flex-flow: bọc cột; -webkit-box-pack: biện minh; -webkit-justify-content: khoảng cách giữa; -ms-flex-pack: biện minh; biện minh-nội dung: khoảng cách giữa; -webkit-align -content: khoảng trắng xung quanh; -ms-flex-line-pack: phân phối; căn chỉnh nội dung: khoảng trắng xung quanh; -webkit-box-align: trung tâm; -webkit-align-items: trung tâm; -ms-flex-align : center; căn chỉnh-items: center; ) /* Phần tử */ .flex-item ( -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-posit: 1; flex-grow : 1; -webkit-flex-thu nhỏ: 2; -ms-flex-âm: 2; co rút linh hoạt: 2; -webkit-flex-cơ sở: 100px; -ms-flex-preferred-size: 100px; cơ sở linh hoạt: 100px; -webkit-box-flex: 1; -webkit-flex: 1 2 100px; -ms-flex: 1 2 100px; linh hoạt: 1 2 100px; -webkit-align-self: trung tâm; -ms-flex-item-align: giữa; căn chỉnh-tự: trung tâm; -webkit-box-thứ tự-nhóm: 3; -webkit-thứ tự: 2; -ms-flex-order: 2; thứ tự: 2; )
Sẽ tốt hơn nếu các thuộc tính có tiền tố đặt trước thuộc tính ban đầu.
Ngày nay không có tiền tố nào trong danh sách này là không cần thiết (theo caniuse). Nói chung có nhiều tiền tố hơn.
Trình duyệt Chrome | Cuộc đi săn | Firefox | Opera | I E. | Android | iOS |
---|---|---|---|---|---|---|
20- (cũ) | 3.1+ (cũ) | 2-21 (cũ) | 10 (giữa) | 2.1+ (cũ) | 3.2+ (cũ) | |
21+ (mới) | 6.1+ (mới) | 22+ (mới) | 12.1+ (mới) | 11+ (mới) | 4.4+ (mới) | 7.1+ (mới) |
- (mới) - cú pháp mới:display:flex; .
- (tweener) - cú pháp cũ không chính thức từ năm 2011: display: flexbox; .
- (cũ) - cú pháp cũ từ năm 2009: display: box;
Băng hình
À, đừng quên video nhé, đôi khi nó cũng thú vị và dễ hiểu đấy. Dưới đây là một vài cái phổ biến:
Liên kết hữu ích trên Flex
flexboxfroggy.com - trò chơi giáo dục flexbox.
Flexplorer là một trình xây dựng mã linh hoạt trực quan.
Mô-đun Bố cục Flexbox (Hộp linh hoạt) nhằm mục đích cung cấp một cách hiệu quả hơn để định vị, căn chỉnh và phân bổ không gian trống giữa các phần tử trong vùng chứa, ngay cả khi kích thước của chúng không xác định trước và/hoặc động (do đó có từ "flex").
Ý tưởng cơ bản của bố cục linh hoạt là cung cấp cho vùng chứa khả năng thay đổi chiều rộng/chiều cao (và thứ tự) của các phần tử của nó để lấp đầy tốt nhất không gian có sẵn(chủ yếu để phù hợp với mọi loại và kích cỡ màn hình). Vùng chứa Flexbox mở rộng các phần tử để lấp đầy không gian trống hoặc thu nhỏ chúng để tránh tràn.
Quan trọng nhất, Flexbox là bất khả tri về hướng, không giống như các bố cục thông thường (các hộp dựa trên vị trí dọc và các phần tử nội tuyến dựa trên định vị ngang). Mặc dù chúng hoạt động đủ tốt nhưng chúng thiếu tính linh hoạt để hỗ trợ các ứng dụng lớn hoặc phức tạp (đặc biệt là khi thay đổi hướng, thay đổi kích thước, kéo dài, thu nhỏ, v.v.).
Ghi chú. Flexbox phù hợp hơn với các thành phần ứng dụng và bố cục nhỏ, trong khi CSS Grid được thiết kế cho bố cục lớn hơn.
Khái niệm cơ bản và thuật ngữ
Bởi vì Flexbox là một mô-đun hoàn chỉnh chứ không phải một thuộc tính duy nhất nên nó chứa rất nhiều thứ khác nhau, bao gồm cả một loạt thuộc tính. Một số trong số chúng được thiết lập cho vùng chứa của chúng (phần tử cha, được gọi là "vùng chứa linh hoạt"), trong khi một số khác được thiết lập cho các phần tử con (được gọi là "phần tử linh hoạt").
Nếu như hệ thống thông thường Trong khi bố cục dựa trên hướng khối và đường thì Flexbox dựa trên "hướng dòng linh hoạt". Vui lòng xem hình ảnh đặc tả này để giải thích ý tưởng cơ bản đằng sau Flexbox.
Về cơ bản các phần tử sẽ được đặt dọc theo trục chính(từ main-start đến main-end) hoặc trục ngang(từ đầu chéo đến cuối chéo).
Hỗ trợ trình duyệt
Mô-đun bố cục hộp linh hoạt CSS
Chrome dành cho Android
Trình duyệt Blackberry, bắt đầu từ phiên bản 10, hỗ trợ cú pháp mới.
Thuộc tính cho vùng chứa
Thuộc tính cho các phần tử
Thuộc tính cho phần tử gốc (Vùng chứa linh hoạt)
trưng bày
Xác định một thùng chứa linh hoạt; chuỗi hoặc khối phụ thuộc vào giá trị được truyền. Cho phép bối cảnh linh hoạt cho tất cả các phần tử con trực tiếp của nó.
Vùng chứa ( display: flex; /* hoặc inline-flex */ )
Xin lưu ý rằng các cột CSS không ảnh hưởng đến vùng chứa linh hoạt.
hướng uốn cong
![](https://i2.wp.com/tuhub.ru/sites/default/files/inline-images/flex-direction2_0.png)
Đặt trục chính, từ đó xác định hướng của các phần tử nằm trong vùng chứa. Flexbox (bên cạnh trình bao bọc tùy chọn) là một khái niệm bố cục một chiều. Hãy nghĩ về các mục linh hoạt chủ yếu dưới dạng hàng ngang hoặc cột dọc.
Vùng chứa ( flex-direction: row | row-reverse | cột | cột-reverse; )
- hàng (mặc định)- từ trái sang phải trong ltr; từ phải sang trái trong rtl;
- đảo ngược hàng- từ phải sang trái trong ltr; từ trái sang phải trong rtl;
- cột- giống như hàng, chỉ từ trên xuống dưới;
- đảo ngược cột- giống như row-reverse , chỉ từ dưới lên trên;
flex-quấn
![](https://i0.wp.com/tuhub.ru/sites/default/files/inline-images/flex-wrap_0.png)
Theo mặc định, các mục sẽ chỉ cố gắng lấp đầy một hàng. Bạn có thể thay đổi hành vi này và cho phép các phần tử được bao bọc thành hàng tiếp theo, Nếu cần.
Container( flex-wrap: nowrap | bọc | bọc-đảo ngược; )
- nowrap (mặc định)- tất cả các phần tử flex sẽ được đặt trên một dòng;
- bọc- các phần tử flex sẽ nằm trên nhiều dòng, từ trên xuống dưới;
- bọc-đảo ngược- các phần tử flex sẽ nằm trên nhiều dòng, từ dưới lên trên;
nội dung biện minh
![](https://i1.wp.com/tuhub.ru/sites/default/files/inline-images/justify-content.png)
Xác định sự căn chỉnh dọc theo trục chính. Điều này giúp phân phối không gian trống còn lại sau khi tất cả các mục flex có chiều rộng cố định và không cố định đã đạt đến kích thước tối đa. Nó cũng giúp cung cấp một số kiểm soát đối với việc căn chỉnh các phần tử khi chúng tràn một dòng.
Vùng chứa (justify-content: flex-start | flex-end | center | space-between | space-around; )
- khởi động linh hoạt (mặc định)- các phần tử được ép về đầu dòng;
- đầu uốn cong- các phần tử được ép đến cuối dòng;
- trung tâm- các phần tử nằm ở trung tâm dọc theo đường;
- khoảng cách giữa- các phần tử được đặt đều trên dòng; phần tử đầu tiên ở đầu dòng, phần tử cuối cùng ở cuối dòng;
- không gian xung quanh- các phần tử được đặt đều trên một dòng có khoảng cách bằng nhau bên cạnh chúng. Lưu ý rằng về mặt trực quan, không gian không bằng nhau vì tất cả các phần tử đều có cùng một không gian ở cả hai bên. Phần tử đầu tiên sẽ có một đơn vị không gian ở phía bên chứa, nhưng có hai đơn vị ở giữa nó và phần tử tiếp theo, vì phần tử tiếp theo cũng có một đơn vị ở cả hai bên.
căn chỉnh các mục
![](https://i1.wp.com/tuhub.ru/sites/default/files/inline-images/align-items.png)
Thuộc tính này xác định hành vi của các mục linh hoạt dọc theo trục chéo trên dòng hiện tại. Hãy nghĩ về nó như , nhưng đối với trục ngang (vuông góc với trục chính).
Vùng chứa ( căn chỉnh các mục: flex-start | flex-end | center |lineline | Stretch; )
- khởi động linh hoạt - các phần tử được đặt ở đầu trục ngang;
- đầu uốn cong các phần tử được đặt ở cuối trục ngang;
- trung tâm - các phần tử nằm ở tâm của trục ngang;
- đường cơ sở- các phần tử được căn chỉnh dọc theo đường cơ sở;
- kéo dài (mặc định)- kéo dài để lấp đầy toàn bộ vùng chứa (vẫn tôn trọng chiều rộng tối thiểu/chiều rộng tối đa);
căn chỉnh nội dung
![](https://i1.wp.com/tuhub.ru/sites/default/files/inline-images/align-content.png)
Ghi chú. Thuộc tính này không có hiệu lực khi chỉ có một hàng mục linh hoạt.
Vùng chứa ( căn chỉnh nội dung: flex-start | flex-end | center | space-between | space-around | Stretch; )
- khởi động linh hoạt- các dòng nằm ở đầu container;
- đầu uốn cong- các dòng nằm ở cuối container;
- trung tâm- các đường kẻ được đặt ở giữa thùng chứa;
- khoảng cách giữa- các dòng được phân bố đều, dòng đầu tiên nằm ở đầu thùng chứa và dòng cuối cùng cuối cùng;
- không gian xung quanh- các đường được phân bố đều, có cùng khoảng cách giữa chúng;
- kéo dài (mặc định)- các đường được kéo dài trên toàn bộ chiều rộng để chiếm không gian còn lại;
Thuộc tính cho phần tử con (Phần tử Flex)
đặt hàng
![](https://i1.wp.com/tuhub.ru/sites/default/files/inline-images/order-2.png)
Theo mặc định, tất cả các phần tử được sắp xếp theo thứ tự ban đầu. Tuy nhiên, thuộc tính order kiểm soát thứ tự sắp xếp các phần tử trong vùng chứa.
Mặt hàng (đặt hàng:
phát triển linh hoạt
![](https://i1.wp.com/tuhub.ru/sites/default/files/inline-images/flex-grow.png)
Thuộc tính xác định khả năng tăng kích thước của phần tử nếu cần thiết. Nó lấy một giá trị không thứ nguyên làm tỷ lệ, xác định lượng không gian trống bên trong vùng chứa mà phần tử sẽ chiếm.
Nếu tất cả các phần tử có thuộc tính flex-grow được đặt thành 1 thì không gian trống bên trong vùng chứa sẽ được phân bổ đều cho tất cả các phần tử. Nếu một trong các phần tử có giá trị được đặt thành 2 thì phần tử đó sẽ chiếm hai lần nhiều không gian hơn hơn những người còn lại (ít nhất anh ấy sẽ cố gắng).
Mục(flex-grow:
Không thể chỉ định số âm.
cơ sở linh hoạt
Xác định kích thước mặc định của một phần tử trước khi phân bổ không gian còn lại. Đây có thể là độ dài (20%, 5rem, v.v.) hoặc từ khóa. Từ khóa auto có nghĩa là "trông giống thuộc tính chiều rộng hoặc chiều cao của tôi". Từ khóa nội dung có nghĩa là "kích thước dựa trên nội dung của phần tử" - từ khóa này chưa được hỗ trợ tốt nên rất khó kiểm tra và càng khó hơn để biết anh em của nó min-content, max-content và nội dung phù hợp làm.
Mục ( cơ sở flex:
Nếu bạn đặt giá trị thành 0 thì không gian thêm xung quanh nội dung sẽ không được tính đến. Nếu được đặt thành tự động, không gian bổ sung sẽ được phân bổ dựa trên giá trị.
uốn cong
Đây là viết tắt của , và . Tham số thứ hai và thứ ba (flex-shrink và flex-base) là tùy chọn. Giá trị mặc định được đặt thành 0 1 tự động.
Mục ( flex: không có | [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }
tự sắp xếp
![](https://i0.wp.com/tuhub.ru/sites/default/files/inline-images/align-self.png)
Thuộc tính này cho phép bạn ghi đè căn chỉnh mặc định (hoặc một bộ sử dụng thuộc tính) cho các mục linh hoạt riêng lẻ.
Vui lòng xem phần giải thích thuộc tính để hiểu các giá trị có sẵn.
Mục ( căn chỉnh-tự: tự động | flex-bắt đầu | flex-end | trung tâm | đường cơ sở | căng; ) .item ( căn chỉnh-tự: tự động | flex-bắt đầu | flex-end | trung tâm | đường cơ sở | căng; )
Lưu ý rằng float, clear và Vertical-align không có tác dụng gì đối với phần tử flex.
Ví dụ
Hãy bắt đầu với ví dụ đơn giản nhất, người giải quyết vấn đề, điều xảy ra hầu như hàng ngày: định tâm hoàn hảo. Không thể dễ dàng hơn nếu bạn đang sử dụng Flexbox.
Cha mẹ ( hiển thị: flex; chiều cao: 300px; ) .con ( chiều rộng: 100px; chiều cao: 100px; lề: tự động; )
Điều này phụ thuộc vào lề được đặt thành tự động trên vùng chứa linh hoạt, chiếm thêm dung lượng. Do đó, việc đặt lề dọc thành tự động trên một phần tử sẽ làm cho phần tử đó được căn giữa hoàn hảo trên cả hai trục.
Bây giờ chúng ta hãy sử dụng thêm một vài thuộc tính. Hãy xem xét danh sách 6 phần tử, tất cả đều có kích thước cố định về mặt thẩm mỹ, nhưng chúng có thể được tự động hóa. Chúng tôi muốn chúng được phân bố đều dọc theo trục hoành để khi thay đổi kích thước trình duyệt, mọi thứ sẽ ổn (không có truy vấn phương tiện!).
Flex-container ( display: flex; flex-flow: rowwrap; just-content: space-around; )
Sẵn sàng! Mọi thứ khác chỉ là một số vấn đề về thiết kế. Dưới đây là một ví dụ trên CodePen, hãy nhớ đến đó và thử thay đổi kích thước các cửa sổ để xem điều gì sẽ xảy ra.
Hãy thử cái gì khác. Hãy tưởng tượng chúng ta có một điều hướng được căn phải ở đầu màn hình nhưng chúng ta muốn nó được căn giữa trên các màn hình cỡ trung bình và trong một cột duy nhất trên màn hình nhỏ. Dễ như ăn bánh.
Điều hướng ( display: flex; flex-flow: rowwrap; justify-content: flex-end; ) @media all và (max-width: 800px) ( .navigation (justify-content: space-around; ) ) @media all và (độ rộng tối đa: 500px) ( .navigation ( flex-direction: cột; ) )
Hãy cố gắng làm điều gì đó tốt hơn nữa bằng cách tận dụng tính linh hoạt của các vật phẩm linh hoạt của chúng tôi! Thế còn bố cục ba cột ưu tiên thiết bị di động với đầu trang và chân trang trải dài toàn bộ chiều rộng của màn hình và không phụ thuộc vào thứ tự ban đầu của các thành phần.
Trình bao bọc ( display: flex; flex-flow: rowwrap; ) .header, .main, .nav, .aside, .footer ( flex: 1 100%; ) @media all và (min-width: 600px) ( .aside ( flex: 1 auto; ) ) @media all và (min-width: 800px) ( .main ( flex: 2 0px; ) .aside-1 ( order: 1; ) .main ( order: 2; ) .aside- 2 ( thứ tự: 3; ) .footer ( thứ tự: 4; ) )
Thuộc tính liên quan
Lỗi
Tất nhiên, Flexbox không phải là không có lỗi. Bộ sưu tập hay nhất mà tôi từng xem được trình bày bởi Philip Walton và Flexbugs của Greg Whitworth. Mã nguồn mở một nơi để theo dõi tất cả các lỗi nên tôi nghĩ tốt nhất bạn chỉ nên để lại link.
Về việc làm việc với Flexbox dễ dàng như thế nào bằng cách sử dụng ví dụ về bố cục của mẫu trang web tin tức.
Tin tôi đi, không cần phải phân tích chi tiết về tất cả các khía cạnh khi làm việc với Flexbox nếu bạn muốn bắt đầu sử dụng nó ngay bây giờ. Trong hướng dẫn này, tác giả sẽ giới thiệu cho bạn một số thuộc tính của Flexbox và tạo một “bố cục tin tức” giống như bố cục mà bạn có thể đã thấy trên trang web The Guardian.
Lý do tác giả sử dụng Flexbox là vì nó cung cấp rất nhiều khả năng:
- dễ dàng tạo các cột thích ứng;
- tạo cột cùng chiều cao;
- khả năng ép nội dung xuống đáy thùng chứa.
Đi nào!
1. Bắt đầu bằng cách tạo hai cột
Tạo cột khi Trợ giúp CSS luôn tiềm ẩn những khó khăn nhất định. Trong một thời gian dài, float và/hoặc bảng đã (và đang) được sử dụng rộng rãi để thực hiện nhiệm vụ này, nhưng mỗi phương pháp này đều có (và có) nhược điểm của nó.Đổi lại, Flexbox đơn giản hóa quá trình này, có một số ưu điểm như:
Viết mã sạch hơn: tất cả những gì chúng ta phải làm là tạo một vùng chứa có quy tắc hiển thị: linh hoạt;
- tính linh hoạt: chúng tôi có thể thay đổi kích thước, kéo dài và căn chỉnh các cột bằng cách thay đổi một vài dòng CSS;
- đánh dấu ngữ nghĩa;
- Ngoài ra, khi sử dụng Flexbox, không cần phải hủy gói để tránh hành vi không thể đoán trước của bố cục.
Hãy bắt đầu bằng cách tạo hai cột, một trong số đó sẽ chiếm 2/3 chiều rộng của vùng chứa của chúng ta và một trong số đó sẽ chiếm 1/3 chiều rộng của vùng chứa.
Có hai yếu tố ở đây:
Thùng đựng hàng cột;
- hai phần tử con cột, một trong số đó có lớp bổ sung cột chính, mà chúng ta sẽ sử dụng sau này để làm cho cột rộng hơn.
Cột ( display: flex; ) .column ( flex: 1; ) .main-column ( flex: 2; )
Bởi vì cột chính có giá trị flex bằng 2
, thì cột này sẽ chiếm dung lượng gấp đôi cột thứ hai.
Hãy thêm một chút thiết kế trực quan và cuối cùng, chúng ta nhận được:
Bấm vào để xem hoạt động
2. Biến mỗi cột thành một thùng chứa flexbox
Mỗi cột trong số hai cột sẽ chứa một số bài viết được sắp xếp theo chiều dọc, do đó, từ hai phần tử này, chúng ta cũng phải tạo các thùng chứa flexbox.Vì vậy, chúng ta cần các bài viết:
Định vị theo chiều dọc bên trong cột container;
- chiếm hết không gian có sẵn.
Luật lệ hướng linh hoạt: cộtđược chỉ định cho vùng chứa, cùng với quy tắc uốn cong: 1, được chỉ định cho phần tử con, cho phép bài viết lấp đầy tất cả không gian dọc có sẵn, trong khi chiều cao của hai cột đầu tiên không thay đổi.
Bấm vào để xem hoạt động
3. Làm hộp đựng từ một bài viết
Bây giờ, để mở rộng khả năng của chúng ta hơn nữa, hãy biểu diễn mỗi bài viết dưới dạng một hộp chứa flexbox. Mỗi thùng chứa như vậy sẽ chứa:Tiêu đề;
- đoạn văn;
- bảng thông tin có tên tác giả và số lượng bình luận;
- một số loại hình ảnh thích ứng.
Ở đây chúng ta sử dụng Flexbox để đẩy thanh thông tin xuống cuối phần tử. Ở đây, hãy nhìn vào kết quả mà chúng tôi mong đợi nhận được.
Và đây là mã của chính nó:
.article ( display: flex; flex-direction: colum; flex-basis: auto; /* Đặt kích thước ban đầu của phần tử tùy thuộc vào nội dung của nó */ ) .article-body ( display: flex; flex: 1; flex- hướng: cột; ) .article-content ( flex: 1; /* Nội dung lấp đầy mọi khoảng trống còn lại, do đó đẩy thanh thông tin xuống cuối */ )
Các thành phần bên trong bài viết được sắp xếp theo chiều dọc nhờ sử dụng quy tắc hướng linh hoạt: cột.
Chúng tôi cũng đã áp dụng tính chất uốn cong: 1 thành phần tử nội dung bài viết, từ đó kéo dài nó ra hết không gian có sẵn và nhấn thông tin bài viếtđến đáy. Chiều cao của các cột trong trường hợp này không thành vấn đề.
Bấm vào để xem hoạt động
4. Thêm một số cột lồng nhau
Trên thực tế, chúng ta cần cột bên trái để bao gồm thêm một số cột nữa. Do đó, chúng ta cần thay thế phần tử thứ hai chịu trách nhiệm về bài viết bằng một vùng chứa cột, mà chúng tôi đã sử dụng trước đó.
Vì chúng ta muốn cột lồng nhau đầu tiên rộng hơn nên chúng ta sẽ thêm lớp vào phần tử cột lồng nhau và trong CSS, chúng tôi chỉ ra:
Cột lồng nhau ( flex: 2; )
Bây giờ cột này sẽ rộng gấp đôi cột thứ hai.
Bấm vào để xem hoạt động
5. Làm bài viết đầu tiên với bố cục nằm ngang
Bài viết đầu tiên của chúng tôi thực sự lớn. Để sử dụng hiệu quả không gian trên màn hình điều khiển, hãy thay đổi hướng của nó sang ngang.Bài viết đầu tiên ( flex-direction: row; ) .first-article .article-body ( flex: 1; ) .first-article .article-image ( chiều cao: 300px; order: 2; phần đệm-top: 0; chiều rộng: 400px; )
Tài sản đặt hàng V. trong trường hợp nàyđóng một vai trò lớn vì nó cho phép bạn thay đổi thứ tự các thành phần HTML mà không thay đổi đánh dấu HTML. Trong thực tế, bài viết-hình ảnh trong mã nó xuất hiện trước phần tử thân bài viết, nhưng cư xử như thể anh ta đang đứng sau anh ta.
Bấm vào để xem hoạt động
6. Tạo bố cục thích ứng
Bây giờ mọi thứ trông giống như chúng ta mong muốn, mặc dù có một chút bị bóp méo. Hãy khắc phục điều này bằng cách thêm tính linh hoạt vào bố cục của chúng tôi.Một trong những điều tuyệt vời về Flexbox là bạn có thể chỉ cần xóa một quy tắc hiển thị: uốn cong trong vùng chứa để vô hiệu hóa hoàn toàn nó (Flexbox), trong khi các thuộc tính còn lại của nó (chẳng hạn như căn chỉnh các mục hoặc uốn cong) sẽ vẫn hoạt động.
Do đó, chúng ta có thể kích hoạt bố cục thích ứng bằng cách chỉ sử dụng Flexbox khi cần thiết.
Vì vậy chúng ta sẽ xóa hiển thị: uốn cong từ bộ chọn .cột Và .cột, thay vì "đóng gói" chúng vào một truy vấn phương tiện:
@media screen và (min-width: 800px) ( .columns, .column ( display: flex; ) )
Đó là tất cả! Trên màn hình có độ phân giải thấp, tất cả các bài viết sẽ nằm chồng lên nhau và trên màn hình có độ phân giải trên 800 pixel - ở hai cột.
7. Thêm các bước hoàn thiện
Để làm cho bố cục trông hấp dẫn hơn trên màn hình lớn, hãy thêm một số chỉnh sửa CSS:@media screen và (min-width: 1000px) ( .first-article ( flex-direction: row; ) . first-article . Article-body ( flex: 1; ) . first-article .article-image ( chiều cao: 300px ;thứ tự: 2;phần đệm trên cùng: 0;chiều rộng: 400px; ) .cột chính ( flex: 3; ) .cột lồng nhau ( flex: 2; ) )
Nội dung bài viết đầu tiên được căn chỉnh theo chiều ngang: chữ ở bên trái, hình ảnh ở bên phải. Ngoài ra, cột chính hiện rộng hơn (75%). Điều tương tự cũng xảy ra với cột lồng nhau (66%).
Và đây là kết quả cuối cùng!
Bấm vào để xem hoạt động
Phần kết luận
Bây giờ bạn có thể tự mình thấy rằng bạn có thể sử dụng Flexbox trong các dự án của mình mà không cần đi sâu vào tất cả những điều phức tạp của nó và bố cục được tạo là một ví dụ rõ ràng về điều này. Ít nhất, tác giả thực sự hy vọng như vậy.Flexbox giới thiệu một cách mới để hiển thị các hộp trong bố cục bằng css3 và được thiết kế để giúp việc định vị các phần tử tương đối với nhau dễ dàng hơn. Trong bài viết này, chúng ta sẽ xem xét cú pháp mới nhất cho mô hình flexbox. Ngày nay, các phiên bản trình duyệt đang thay đổi khá nhanh, vì vậy bạn sẽ biết khi nào mô hình flexbox được hỗ trợ rộng rãi trong các dự án thực tế.
Flexbox dùng để làm gì?
Các nhà phát triển từ lâu đã sử dụng bảng, phần tử float, khối nội tuyến và các thuộc tính CSS khác để tạo cho các khối bố cục mong muốn. Tuy nhiên, không có công cụ nào ở trên được thiết kế để tạo các trang và ứng dụng phức tạp được sử dụng trong hầu hết mọi dự án hiện nay. Những việc đơn giản như căn giữa theo chiều dọc khá khó thực hiện. Tạo bố cục dựa trên lưới lỏng thường được coi là đỉnh cao của tính chuyên nghiệp, đó là lý do tại sao các khung CSS dựa trên lưới đã trở nên phổ biến. Vì vậy, nếu nhiều dự án thường sử dụng lưới chất lỏng, các khối có chiều cao bằng nhau, căn giữa các khối theo chiều dọc, v.v., thì câu hỏi đặt ra là: "Tại sao chưa có tính năng nào cho phép thực hiện những việc này một cách nhanh chóng và dễ dàng?"
Flexbox nhằm mục đích giải quyết tất cả những vấn đề này!
Trạng thái thông số kỹ thuật và hỗ trợ trình duyệt
Mô hình flexbox đã được phát triển được 4 năm. Các trình duyệt sử dụng các phiên bản thử nghiệm khác nhau của thông số kỹ thuật. Vào tháng 9 năm 2012, đợt đánh giá cú pháp Flexbox lần thứ 3 của một nhóm nhà phát triển W3C đã đạt được trạng thái Ứng viên W3C. Điều này có nghĩa là W3C phê duyệt cú pháp hiện tại và cho phép các trình duyệt sử dụng tiền tố của nhà cung cấp.
Lịch sử thay đổi đặc điểm kỹ thuật của Flexbox:
- Bản thảo làm việc tháng 7 năm 2009 (hiển thị: hộp;)
- Bản thảo làm việc tháng 3 năm 2011 (hiển thị: flexbox;)
- Bản thảo làm việc tháng 11 năm 2011 (hiển thị: flexbox;)
- Bản thảo làm việc tháng 3 năm 2012 (hiển thị: flexbox;)
- Bản thảo làm việc tháng 6 năm 2012 (hiển thị: flex;)
- Đề xuất ứng viên tháng 9 năm 2012 (hiển thị: flex;)
Trình duyệt đã nhận hỗ trợ nhanh chóng Flexbox. Chrome 22+, Opera 12.1+, IE10, Firefox >=16 đã hỗ trợ Flexbox. Tôi khuyên bạn nên sử dụng một trong những trình duyệt này để xem các ví dụ.
Khái niệm và thuật ngữ
Mặc dù flexbox được thiết kế để giúp sắp xếp các khối trong bố cục dễ dàng hơn, điều này thường khó khăn và trong một số trường hợp, có vấn đề trước đây, nhưng vẫn sẽ mất một thời gian để giải quyết những vấn đề này bằng cách sử dụng Flexbox trong các dự án thực tế. Thuật ngữ của mô hình có thể gây khó khăn cho việc sử dụng. Hãy xem mô hình Flexbox hoạt động như thế nào.
Mô hình Flexbox bao gồm một thùng chứa linh hoạt và các mục linh hoạt. Vùng chứa flex phải có thuộc tính display được đặt thành flex hoặc inline-flex . Với giá trị flex, vùng chứa là phần tử khối và với inline-flex, nó là phần tử nội tuyến.
Ví dụ khai báo vùng chứa flex:
Vùng chứa linh hoạt ( display: -webkit-flex; display: flex; )
Flex container là cha mẹ của các mục linh hoạt. Có thể có bao nhiêu điểm linh hoạt tùy thích. Mọi thứ bên ngoài flex container và bên trong flex items đều được hiển thị như bình thường. Vì vậy Flexbox xác định cách các mục linh hoạt sẽ được sắp xếp bên trong một thùng chứa linh hoạt.
Các mục linh hoạt được đặt bên trong thùng chứa linh hoạt dọc theo dòng linh hoạt. Theo mặc định, chỉ có một dòng flex trong hộp chứa flex. Đây là một ví dụ với hai mục được sắp xếp dọc theo đường flex từ trái sang phải theo mặc định:
Flex-container( display: -webkit-flex; display: flex; width: 700px; màu nền: xanh lá cây; lề: 20px tự động; ) .flex-item( màu nền: đỏ; chiều rộng: 100px; chiều cao: 100px; lề: 5px; màu: #fff; )
Chế độ viết (chế độ hiển thị nội dung)
Một phần quan trọng của việc tùy chỉnh flexbox là thay đổi hướng của đường flex. Theo mặc định, hướng của dòng flex trùng với hướng của văn bản: từ trái sang phải, từ trên xuống dưới.
Một mô-đun chế độ viết mới đã xuất hiện trong thông số kỹ thuật. Nó cho phép bạn thay đổi hướng của văn bản từ phải sang trái hoặc thậm chí theo chiều dọc.
Mô-đun này đang được phát triển nhưng Chrome hỗ trợ thuộc tính CSS hướng. Nếu trong ví dụ trước chúng ta đặt thuộc tính hướng: rtl (phải sang trái), thì không chỉ hướng hiển thị nội dung từ phải sang trái sẽ thay đổi mà cả hướng của đường flex, điều này sẽ dẫn đến thay đổi về bố cục.
Nội dung ( hướng: rtl; ) .flex-container ( display: -webkit-flex; display: flex; width: 700px; chiều cao: 240px; màu nền: xanh lá cây; lề: 10px tự động; ) .flex-item ( nền- màu: đỏ; chiều rộng: 100px; chiều cao: 100px; lề: 5px; )
Từ ví dụ này chúng ta có thể kết luận tại sao thuật ngữ Flexbox lại khoảnh khắc này thật trừu tượng. Chúng tôi không thể chỉ đơn giản chỉ ra “phải”, “trái”, “xuống”, “lên” khi chúng tôi không biết trang này được viết bằng ngôn ngữ nào (có lẽ là tiếng Ả Rập - kiểu viết từ phải sang trái!).
Trục chính và trục ngang
Để độc lập với chế độ hiển thị nội dung hướng, Flexbox sử dụng khái niệm Trục chính và Trục chéo. Các đường Flex đi theo trục chính. Trục ngang vuông góc với trục chính. Tên của điểm bắt đầu và điểm kết thúc cũng như hướng của từng trục:
- Bắt đầu chính
- Kết thúc chính
- Hướng chính (đôi khi được gọi là Hướng dòng chảy)
- Bắt đầu chéo
- đầu chéo
- hướng chéo
Trước khi chúng ta tiếp tục, điều quan trọng là phải hiểu thuật ngữ của trục chính và trục ngang. Mọi thứ trong mô hình flexbox đều được định vị tương ứng với hai trục này. Trong tất cả các ví dụ của chúng tôi, chế độ hòa trộn của chế độ viết là từ trái sang phải, từ trên xuống dưới. Nhưng bạn nên nhớ rằng điều này có thể không phải lúc nào cũng đúng.
Thuộc tính vùng chứa linh hoạt:
Hướng linh hoạt
Thuộc tính flex-direction cho phép bạn thay đổi trục của vùng chứa flex. Theo mặc định, thuộc tính flex-direction là row. Trong trường hợp này, các mục linh hoạt được sắp xếp theo chế độ viết. Hãy để chúng tôi nhắc lại cho bạn rằng điều này có nghĩa là hướng từ trái sang phải, từ trên xuống dưới (theo mặc định).
Các giá trị có thể khác:
- row-reverse : Main Start và Main End bị đảo ngược. Ngay cả khi chế độ viết được chỉ định là ltr (từ trái sang trái), thì các mục linh hoạt sẽ vẫn được đặt từ phải sang trái.
- cột: Trục chính và trục chéo được hoán đổi cho nhau. Nếu chế độ hiển thị nội dung theo chiều ngang thì các mục flex sẽ vẫn được định vị theo chiều dọc.
- colum-reverse: tương tự như cột nhưng bị đảo ngược.
Hãy thay đổi thuộc tính flex-direction thành cột trong ví dụ trước:
Flex-container ( display: -webkit-flex; display: flex; -webkit-flex-direction: cột; flex-direction: cột; chiều rộng: 700px; chiều cao: 240px; màu nền: xanh lá cây; lề: tự động 10px; ) .flex-item ( màu nền: đỏ; chiều rộng: 100px; chiều cao: 100px; lề: 5px; )
Bây giờ các mục linh hoạt được định vị theo chiều dọc.
nội dung biện minh
biện minh cho nội dung kiểm soát vị trí của các mục linh hoạt dọc theo trục chính. Những giá trị khả thi:
- khởi động linh hoạt (mặc định)
- đầu uốn cong
- trung tâm
- khoảng cách giữa
- không gian xung quanh
Hãy xem một ví dụ vớijustify-content: center để các mục flex được căn giữa trên trục chính:
Flex-container ( display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width: 700px; Height: 240px; màu nền: xanh lá cây; lề: tự động 10px; ) .flex-item ( màu nền: đỏ; chiều rộng: 100px; chiều cao: 100px; lề: 5px; )
flex-start , flex-end và center hoạt động bằng cách kết nối với nhau dọc theo một trục chính. Nhưng space-between và space-around phân phối không gian trống giữa các mục linh hoạt theo một cách nhất định. Đây là sơ đồ từ thông số kỹ thuật cho thấy sự phân bổ của Justify-content :
căn chỉnh các mục
Align-items là thuộc tính bổ sung cho Justify-content. Align-items kiểm soát việc hiển thị các mục linh hoạt so với trục vuông góc. Những giá trị khả thi:
- khởi động linh hoạt (mặc định)
- đầu uốn cong
- trung tâm
- đường cơ sở
- kéo dài
Chúng ta hãy xem xét việc sử dụng thuộc tính Align-items:center, cho phép các mục linh hoạt được căn giữa theo chiều dọc quanh trục vuông góc:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-items: center; căn chỉnh các mục: center; chiều rộng: 700px; chiều cao: 240px; màu nền: xanh lá cây; lề: tự động 10px; ) .flex-item ( màu nền: đỏ; chiều rộng: 100px; chiều cao: 100px; lề: 5px; )
Vì vậy, flex-start , flex-end và center luôn được đặt nối với nhau. Giá trị kéo dài khá đơn giản: nó làm cho các mục linh hoạt kéo dài từ Cross Start đến Cross End, nghĩa là, theo chiều dọc so với thùng chứa flex. đường cơ sở buộc các mục linh hoạt phải được định vị dọc theo đường cơ sở. Đường cơ sở được tính toán dựa trên nội dung nội tuyến của các mục linh hoạt. Dưới đây là giải thích rõ hơn về cách hoạt động của các giá trị này:
Flex-bọc
Trong tất cả các ví dụ được xem xét, hộp chứa linh hoạt có một dòng linh hoạt. Sử dụng thuộc tính flex-wrap sẽ cho phép bạn tạo một thùng chứa flex với số tiền khác nhauđường uốn cong. Những giá trị khả thi:
- nowrap (mặc định)
- bọc-đảo ngược
Nếu flex-wrap được đặt thành Wrap thì các dòng flex bổ sung sẽ được đưa vào các mục flex, nhưng chỉ khi các mục flex không có đủ không gian để vừa trên một dòng flex. Các đường uốn bổ sung được thêm vào theo hướng vuông góc với trục.
Ví dụ về việc sử dụng flex-wrap:
Flex-container ( display: -webkit-flex; display: flex; -webkit-flex-wrap: bọc; flex-wrap: bọc; chiều rộng: 700px; chiều cao: 240px; màu nền: xanh lá cây; lề: tự động 10px; ) .flex-item ( màu nền: đỏ; chiều rộng: 300px; chiều cao: 100px; lề: 5px; )
Giá trị bọc-đảo ngược tương tự như giá trị bọc, ngoại trừ các đường flex mới được thêm vào theo hướng ngược lại dọc theo trục vuông góc.
căn chỉnh nội dung
Align-content thay đổi hành vi của thuộc tính flex-wrap. Giá trị này tương tự như căn chỉnh các mục nhưng thay vì căn chỉnh các mục linh hoạt, nó căn chỉnh các đường linh hoạt. Như bạn có thể mong đợi, các giá trị tương tự nhau:
- kéo dài (mặc định)
- khởi động linh hoạt
- đầu uốn cong
- trung tâm
- khoảng cách giữa
- không gian xung quanh
Nguyên lý hoạt động của các giá trị này cũng tương tự như justify-content và Align-items.
Ví dụ căn chỉnh nội dung: giữa
dòng chảy linh hoạt
Thuộc tính này kết hợp các thuộc tính flex-direction và flex-wrap.
dòng chảy linh hoạt:
Flex-container ( -webkit-flex-flow: cột nowrap; flex-flow: cột nowrap; )
Thuộc tính của các mục linh hoạt
Một mục linh hoạt là một khối con của một thùng chứa linh hoạt. Nội dung của một thùng chứa linh hoạt đề cập đến mục linh hoạt của thùng chứa đó. Nội dung của mục flex được hiển thị như bình thường. Ví dụ, trong khi nó hợp lệ tài sản nổi, các mục linh hoạt không phản ứng với điều này theo bất kỳ cách nào. Phao cũng có thể được đặt bên trong vật phẩm linh hoạt.
Như họ nói, các mặt hàng linh hoạt có Kích thước chính và Kích thước chéo. Kích thước chính là kích thước của mục linh hoạt theo hướng trục chính và Kích thước chéo theo hướng trục chéo. Trên thực tế, chiều rộng hoặc chiều cao của một mục linh hoạt có thể là Kích thước chính và Kích thước chéo tùy thuộc vào trục của thùng chứa linh hoạt.
Hãy xem xét các thuộc tính điều chỉnh hành vi của các mục linh hoạt.
Đặt hàng
Thứ tự là tài sản đơn giản nhất. Thứ tự của các mục linh hoạt được xác định bằng cách sắp xếp các mục linh hoạt trong HTML. Trong ví dụ này, chúng ta sẽ thay đổi giá trị thuộc tính thứ tự của một mục linh hoạt thành -1 và xem điều này thay đổi thứ tự của các mục linh hoạt khác như thế nào.
Flex-container ( display: -webkit-flex; display: flex; -webkit-flex-wrap: bọc; flex-wrap: bọc; -webkit-align-content: center; căn chỉnh nội dung: center; chiều rộng: 700px; chiều cao : 240px; màu nền: xanh lá cây; lề: 10px tự động; .flex-item ( màu nền: đỏ; chiều rộng: 300px; chiều cao: 100px; lề: 5px; ) .first ( -webkit-order: -1; order : -1; )
Thuộc tính này có thể hữu ích cho khả năng truy cập khi thứ tự của các mục linh hoạt trong HTML phải là một chiều nhưng hiển thị các mục linh hoạt theo một thứ tự khác.
Lề
Có thể bạn đã quen với lề: hiệu ứng tự động. Flexbox thực hiện điều tương tự nhưng với nhiều khả năng hơn. “Tự động” ngốn thêm không gian. Thuộc tính này có thể được sử dụng để định vị các mục linh hoạt khác nhau.
Ví dụ: hãy khai báo lề-right: auto; đối với mục linh hoạt đầu tiên, trong khi nó sẽ cung cấp tất cả không gian trống có thể có ở bên phải của nó:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; căn chỉnh nội dung: center; chiều rộng: 700px; chiều cao: 240px; màu nền: xanh lá cây; lề: tự động 10px; ) .flex-item ( màu nền: đỏ; chiều rộng: 100px; chiều cao: 100px; lề: 5px; ) .flex-item:first-child( lề-phải: auto; )
Bây giờ hãy xem một ví dụ về cách hoạt động của lề: auto
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; căn chỉnh nội dung: center; chiều rộng: 700px; chiều cao: 240px; màu nền: xanh lá cây; lề: tự động 10px; ) .flex-item ( màu nền: đỏ; chiều rộng: 100px; chiều cao: 100px; lề: 5px; ) .flex-item:first-child( lề: auto; )
tự sắp xếp
Thuộc tính Align-self của một mục sẽ ghi đè thuộc tính Align-items của hộp chứa linh hoạt. Các giá trị có thể có tương tự như Align-items :
- kéo dài (mặc định)
- khởi động linh hoạt
- đầu uốn cong
- trung tâm
- đường cơ sở
Trong ví dụ này, chúng ta sẽ gán các giá trị thuộc tính Align-self khác nhau cho các mục:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; căn chỉnh nội dung: center; chiều rộng: 700px; chiều cao: 240px; màu nền: xanh lá cây; lề: tự động 10px; ) .flex-item ( nền-color: đỏ; chiều rộng: 100px; chiều cao tối thiểu: 70px; lề: 5px; ) .item1 ( -webkit-align-self: flex-start; căn chỉnh-self: flex-start; ) . item2 ( -webkit-align-self: flex-end; căn chỉnh-self: flex-end; ) .item3 ( -webkit-align-self: center; căn chỉnh-self: center; ) .item4 ( -webkit-align-self : đường cơ sở; căn chỉnh-tự: đường cơ sở; ) .item5 ( -webkit-align-self: đường cơ sở; căn chỉnh-tự: đường cơ sở; đệm: 2em 0; ) .item6 ( -webkit-align-self: căng; căn chỉnh-tự: kéo dài; )
uốn cong
Cuối cùng chúng ta đã đạt được thuộc tính flex trong Flexbox. Flex xác định cách các mục linh hoạt sẽ sử dụng không gian có sẵn dọc theo trục chính. Hãy xem xét từng giá trị có thể.
Uốn cong:
Cú pháp này chỉ định số lượng mục linh hoạt sẽ chiếm tổng chiều rộng của vùng chứa linh hoạt. Trong ví dụ sau, mục linh hoạt đầu tiên sẽ chiếm 2/4 dung lượng trống và hai mục linh hoạt còn lại sẽ chiếm 1/4 mỗi mục:
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; căn chỉnh nội dung: center; chiều rộng: 700px; chiều cao: 240px; màu nền: xanh lá cây; lề: tự động 10px; ) .flex-item ( màu nền: đỏ; chiều rộng: 100px; chiều cao tối thiểu: 70px; lề: 5px; ) .item1 ( -webkit-flex: 2; flex: 2; ) .item2 ( -webkit-flex: 1 ; flex: 1; ) .item3 ( -webkit-flex: 1; flex: 1; )
Thường thì bạn phải phân bố đều các phần tử theo chiều rộng. Để làm điều này, chỉ cần đặt giá trị của tài sản này 1 và tất cả các mục linh hoạt sẽ được phân phối theo chiều rộng của vùng chứa.
Flex-container ( display: -webkit-flex; display: flex; -webkit-align-content: center; căn chỉnh nội dung: center; chiều rộng: 700px; chiều cao: 240px; màu nền: xanh lá cây; lề: tự động 10px; ) .flex-item ( màu nền: đỏ; chiều rộng: 100px; chiều cao tối thiểu: 70px; lề: 5px; ) .item1 ( -webkit-flex: 1; flex: 1; ) .item2 ( -webkit-flex: 1 ; flex: 1; ) .item3 ( -webkit-flex: 1; flex: 1; )
flex: ban đầu
Các mục linh hoạt có giá trị này sẽ có chiều rộng cố định nghiêm ngặt, nhưng chỉ khi có không gian trống (nếu cần, hãy thu nhỏ kích thước - nó sẽ trở nên dẻo).
linh hoạt: tự động
Điểm uốn trở thành cao su hoàn toàn dọc theo trục chính. Không hoạt động chính xác trong Chrome 23.0.1271.95, vì vậy tốt hơn nên sử dụng flex: 1 .
linh hoạt: không có
các mục linh hoạt có chiều rộng cố định trong mọi tình huống
uốn cong nâng cao
Thuộc tính flex có thể được sử dụng trong chế độ thu nhỏ để chỉ định lựa chọn flex-grow , flex-shrink và flex-basis trong một khai báo duy nhất: uốn cong:
Trong hầu hết các trường hợp, cú pháp này không bắt buộc. Hơn nữa, việc áp dụng phím tắt này đòi hỏi phải có sự hiểu biết sâu sắc về mô hình Flexbox. Bạn có thể làm cho từng thuộc tính flex-grow , flex-shrink và flex-basis trở nên cụ thể. Tôi thực sự khuyên bạn không nên sử dụng từ viết tắt này: mặc định là đưa ra các giá trị hợp lý hơn.
hiển thị
Khi thuộc tính hiển thị được triển khai: thu gọn; nó sẽ khác với các giá trị hiển thị: ẩn; và hiển thị: không có; cho các mặt hàng linh hoạt. Với giá trị thu gọn, phần tử sẽ sử dụng Kích thước chéo của vùng chứa linh hoạt nhưng sẽ không ảnh hưởng đến không gian trục chính. Điều này có thể hữu ích để tự động thêm hoặc xóa các mục linh hoạt mà không ảnh hưởng đến Kích thước chéo của vùng chứa linh hoạt.
Khả năng hiển thị hiện tại: sụp đổ; không hoạt động chính xác trong trình duyệt. Khả năng hiển thị hiện tại: sụp đổ; thực hiện tương tự như khả năng hiển thị: ẩn; Tôi chắc chắn rằng tình hình sẽ thay đổi trong tương lai gần.
Xem cách hoạt động của giá trị thu gọn trong thông số kỹ thuật (http://www.w3.org/TR/css3-flexbox/#visibility-collapse)
Phần kết luận
Như bạn có thể tưởng tượng, Flexbox là một công cụ thiết kế bố cục mạnh mẽ. Nó đòi hỏi một cách tiếp cận hoàn toàn mới để hiển thị các khối. Tôi hy vọng bạn thấy bài viết này hữu ích và có thể bắt đầu thử nghiệm các bố cục bằng Flexbox ngay bây giờ. Tương lai của mô hình này thực sự tuyệt vời.