Hình ảnh Flexbox. order – thứ tự của một khối flex duy nhất bên trong một thùng chứa flex. Thêm các bước hoàn thiện

Xin chào Habr!

Một buổi tối đẹp trời, không báo trước điều gì thú vị, cuộc trò chuyện của chúng tôi nhận được lời đề nghị từ tác giả của một ấn phẩm mà anh ấy viết vào mùa xuân năm 2012, để viết một bài báo làm lại nhưng sử dụng FlexBox và lời giải thích kèm theo về nội dung và cách thức hoạt động của nó. Sau một số nghi ngờ, sự quan tâm đến việc tìm hiểu sâu hơn về đặc tả vẫn chiếm ưu thế và tôi vui vẻ ngồi xuống để gõ những ví dụ tương tự đó. Khi chúng tôi đắm mình trong lĩnh vực này, nhiều sắc thái bắt đầu trở nên rõ ràng, điều này phát triển thành một thứ gì đó không chỉ đơn thuần là thiết kế lại bố cục. Nói chung, trong bài viết này, tôi muốn nói về một đặc tả tuyệt vời có tên là “Mô-đun bố cục hộp linh hoạt CSS” và giới thiệu một số thông số kỹ thuật đó tính năng thú vị và các ví dụ ứng dụng. Tôi vui lòng mời tất cả những ai quan tâm tham gia hack.

Điều tôi muốn bạn chú ý là để tạo bố cục trên FlexBox, nhà phát triển sẽ cần một mức độ thích ứng nào đó. Từ ví dụ của chính mình, tôi cảm thấy kinh nghiệm nhiều năm của mình đang chơi một trò đùa tàn nhẫn. FlexBox yêu cầu một cách suy nghĩ hơi khác về việc sắp xếp các phần tử trong một luồng.

Phần kỹ thuật

Trước khi chuyển sang bất kỳ ví dụ nào, cần hiểu rõ những thuộc tính nào được bao gồm trong đặc tả này và cách chúng hoạt động. Vì một số trong số chúng ban đầu không rõ ràng lắm và một số được bao quanh bởi những huyền thoại không liên quan gì đến thực tế.

Vì thế. FlexBox có hai loại phần tử chính: Flex Container và phần tử con- Vật phẩm linh hoạt. Để khởi tạo vùng chứa, chỉ cần gán, thông qua css, cho phần tử hiển thị: linh hoạt; hoặc hiển thị: nội tuyến-flex;. Sự khác biệt giữa flex và inline-flex chỉ ở nguyên tắc tương tác với các phần tử xung quanh container, tương tự như display:block; và hiển thị: inline-block;, tương ứng.

Bên trong một thùng chứa linh hoạt, hai trục được tạo ra, trục chính và trục vuông góc hoặc trục chéo. Hầu hết các phần tử linh hoạt được căn chỉnh dọc theo trục chính và sau đó dọc theo trục chéo. Theo mặc định, trục chính nằm ngang và hướng từ trái sang phải, còn trục chéo là dọc và hướng từ trên xuống dưới.

Hướng của các trục có thể được điều khiển bằng thuộc tính css hướng uốn cong. Tài sản này nhận một số giá trị:
hàng ngang(mặc định): Trục chính của bộ chứa linh hoạt có cùng hướng với trục nội tuyến của chế độ hướng hàng hiện tại. Điểm bắt đầu (bắt đầu chính) và kết thúc (kết thúc chính) của hướng trục chính tương ứng với điểm bắt đầu (bắt đầu nội tuyến) và kết thúc (kết thúc nội tuyến) của trục nội tuyến.
đảo ngược hàng: Mọi thứ giống như trong hàng, chỉ có main-start và main-end được đổi chỗ cho nhau.
cột: giống như hàng, chỉ có điều bây giờ trục chính được hướng từ trên xuống dưới.
đảo ngược cột: giống như đảo ngược hàng, chỉ có trục chính là hướng từ dưới lên trên.
Bạn có thể thấy cách thức hoạt động của tính năng này trong ví dụ trên jsfiddle.

Theo mặc định, tất cả các mục linh hoạt trong một thùng chứa được đặt trên một dòng, ngay cả khi chúng không vừa với thùng chứa, chúng vẫn vượt ra ngoài ranh giới của nó. Hành vi này được chuyển đổi bằng cách sử dụng thuộc tính flex-quấn. Thuộc tính này có ba trạng thái:
ngay bây giờ(mặc định): Các mục linh hoạt được xếp thành một dòng từ trái sang phải.
bọc: các phần tử linh hoạt được xây dựng ở chế độ nhiều dòng, việc truyền được thực hiện theo hướng trục chéo, từ trên xuống dưới.
bọc-đảo ngược: giống như bọc, nhưng quấn từ dưới lên trên.
Hãy xem một ví dụ.

Để thuận tiện có tài sản bổ sung dòng chảy linh hoạt, trong đó bạn có thể chỉ định đồng thời hướng uốn cong Và flex-quấn. Nó trông như thế này: dòng chảy linh hoạt:

Các phần tử trong vùng chứa có thể được căn chỉnh bằng thuộc tính nội dung biện minh dọc theo trục chính. Thuộc tính này mất tới năm tùy chọn khác nhau các giá trị.
khởi động linh hoạt(mặc định): Các phần tử Flex được căn chỉnh theo điểm gốc của trục chính.
đầu uốn cong: các phần tử được căn chỉnh về cuối trục chính
trung tâm: Các phần tử được căn chỉnh về tâm của trục chính
khoảng cách giữa: các phần tử chiếm toàn bộ chiều rộng có sẵn trong vùng chứa, các phần tử ngoài cùng được ép chặt vào các cạnh của vùng chứa và không gian trống được phân bổ đều giữa các phần tử.
không gian xung quanh: Các phần tử linh hoạt được căn chỉnh sao cho không gian trống được phân bổ đều giữa các phần tử. Nhưng điều đáng chú ý là 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.
Tất nhiên, bạn có thể nhấp vào ví dụ về cách hoạt động của thuộc tính này.

Đó chưa phải là tất cả, chúng ta còn có khả năng căn chỉnh các phần tử dọc theo trục chéo. Bằng cách áp dụng tính chất căn chỉnh các mục, cũng có năm giá trị khác nhau, bạn có thể đạt được hành vi thú vị. Thuộc tính này cho phép bạn căn chỉnh các phần tử trong một hàng tương đối với nhau.
khởi động linh hoạt: tất cả các phần tử được đẩy về đầu dòng
đầu uốn cong: các phần tử được đẩy về cuối dò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
kéo dài(mặc định): các phần tử được kéo dài để lấp đầy toàn bộ dòng.

Một thuộc tính khác tương tự như thuộc tính trước đó là căn chỉnh nội dung. Nó là người duy nhất chịu trách nhiệm căn chỉnh toàn bộ các dòng so với vùng chứa linh hoạt. Nó sẽ không có tác dụng nếu các mục linh hoạt chiếm một dòng. Thuộc tính này có sáu giá trị khác nhau.
khởi động linh hoạt: tất cả các dòng được ép về đầu trục chéo
đầu uốn cong: tất cả các dòng được ép về cuối trục chéo
trung tâm: Tất cả các đường đóng gói được căn chỉnh về tâm của trục chéo
khoảng cách giữa: các dòng được phân bổ từ mép trên xuống dưới, chừa khoảng trống giữa các dòng, trong khi các dòng ngoài cùng được ép vào các cạnh của thùng chứa.
không gian xung quanh: Các dòng được phân bố đều khắp vùng chứa.
kéo dài(mặc định): các dòng được kéo dài để chiếm hết không gian có sẵn.
Bạn có thể thử cách hoạt động của các mục căn chỉnh và nội dung căn chỉnh trong ví dụ này. Tôi đã trình bày cụ thể hai thuộc tính này trong một ví dụ, vì chúng tương tác khá chặt chẽ, mỗi thuộc tính thực hiện nhiệm vụ riêng của mình. Lưu ý điều gì xảy ra khi các phần tử được đặt trên một dòng hoặc trên nhiều dòng.

Chúng tôi đã sắp xếp các tham số của vùng chứa linh hoạt, tất cả những gì còn lại là tìm ra các thuộc tính của các phần tử linh hoạt.
Tính chất đầu tiên chúng ta làm quen là đặt hàng. Thuộc tính này cho phép bạn thay đổi vị trí của một phần tử cụ thể trong luồng. Theo mặc định, tất cả các mục linh hoạt đều có thứ tự: 0; và được xây dựng theo trật tự dòng chảy tự nhiên. Trong ví dụ, bạn có thể thấy các phần tử thay đổi vị trí như thế nào nếu bạn áp dụng những nghĩa khác nhauđặt hàng.

Một trong những thuộc tính chính là cơ sở linh hoạt. Với thuộc tính này, chúng ta có thể chỉ định độ rộng cơ sở của phần tử flex. Giá trị mặc định là tự động. Thuộc tính này có quan hệ mật thiết với phát triển linh hoạt Và co lại, mà tôi sẽ nói về một lát sau. Chấp nhận giá trị chiều rộng tính bằng px, %, em và các đơn vị khác. Về cơ bản, đây không hẳn là chiều rộng của phần tử flex, nó là một loại điểm khởi đầu. Tương đối mà phần tử kéo dài hoặc co lạ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ó.

phát triển linh hoạt trên một số tài nguyên, nó có mô tả hoàn toàn không chính xác. Nó nói rằng nó được cho là đặt tỷ lệ kích thước của các phần tử trong vùng chứa. Trên thực tế, điều này là không đúng sự thật. Thuộc tính này chỉ định hệ số phóng đại của phần tử nếu có không gian trông trong một thùng chứa. Theo mặc định, thuộc tính này có giá trị 0. Hãy tưởng tượng chúng ta có một flex container có chiều rộng 500px, bên trong nó có hai mục flex, mỗi mục có chiều rộng cơ sở là 100px. Điều này để lại 300px không gian trống khác trong vùng chứa. Nếu chúng ta chỉ định flex-grow: 2; cho phần tử đầu tiên và flex-grow: 1; Kết quả là các khối này sẽ chiếm toàn bộ chiều rộng có sẵn của vùng chứa, chỉ có chiều rộng của khối đầu tiên là 300px và khối thứ hai chỉ là 200px. Chuyện gì đã xảy ra thế? Điều đã xảy ra là 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. Đây thực sự là cách nó hoạt động.

Ở đây chúng ta dễ dàng chuyển sang một thuộc tính tương tự khác, cụ thể là co lại. Giá trị mặc định là 1. Nó cũng đặt hệ số thay đổi độ rộng của các phần tử, chỉ trong mặt trái. Nếu container có chiều rộng ít hơn hơn tổng chiều rộng cơ bản của các phần tử thì thuộc tính này có hiệu lực. Ví dụ: vùng chứa có chiều rộng 600px và cơ sở linh hoạt của các phần tử là 300px. Cho phần tử đầu tiên flex-shrink: 2;, và phần tử thứ hai flex-shrink: 1;. Bây giờ hãy thu nhỏ vùng chứa lại 300px. Do đó, tổng chiều rộng của các phần tử lớn hơn vùng chứa 300px. Sự khác biệt này được phân bổ theo tỷ lệ 2:1, vì vậy chúng tôi trừ 200px từ khối đầu tiên và 100px từ khối thứ hai. Kích thước mới các phần tử lần lượt là 100px và 200px cho phần tử thứ nhất và thứ hai. Nếu chúng ta đặt flex-shrink thành 0 thì chúng ta sẽ ngăn phần tử co lại về kích thước nhỏ hơn chiều rộng cơ sở của nó.

Trên thực tế, đây là mô tả rất đơn giản về cách thức hoạt động của nó, để bạn có thể hiểu rõ Nguyên tắc chung. Chi tiết hơn, nếu ai quan tâm thì thuật toán sẽ được mô tả trong phần đặc tả.

Cả ba thuộc tính đều có thể được viết dưới dạng viết tắt bằng biểu thức uốn cong. Cái này trông như thế này:
uốn cong: ;
Và chúng ta cũng có thể viết thêm hai phiên bản viết tắt nữa, flex:tự động; Và flex: không có;, nghĩa là flex: 1 1 tự động; Và flex: 0 0 tự động; tương ứng.

Thuộc tính cuối cùng của các phần tử linh hoạt vẫn còn tự sắp xếp. Mọi thứ ở đây đều đơn giản, nó giống như căn chỉnh các mục cho một vùng chứa, cho phép bạn ghi đè căn chỉnh cho một phần tử cụ thể.

Thế thôi, tôi chán nó rồi! Hãy cho chúng tôi ví dụ!

Chúng tôi đã sắp xếp lại phần kỹ thuật, hóa ra nó khá dài, nhưng bạn cần phải đi sâu vào nó. Bây giờ chúng ta có thể chuyển sang ứng dụng thực tế.
Trong quá trình bố trí “năm mẫu đánh dấu đáp ứng thực sự hữu ích” đó, tôi đã phải quyết định tình huống điển hình, điều mà nhà phát triển gặp phải khá thường xuyên. Với flexbox, việc triển khai các giải pháp này trở nên dễ dàng và linh hoạt hơn.
Hãy lấy bố cục thứ 4 tương tự, bởi vì... nó có những yếu tố thú vị nhất.

Đầu tiên, hãy chỉ định chiều rộng chính của trang, căn chỉnh nó vào giữa và nhấn phần chân trang xuống cuối trang. Như mọi khi nói chung.

Html ( nền: #ccc; chiều cao tối thiểu: 100%; họ phông chữ: sans-serif; hiển thị: -webkit-flex; hiển thị: flex; flex-direction: cột; ) phần thân ( lề: 0; phần đệm: 0 15px ; hiển thị: -webkit-flex; hiển thị: flex-direction: cột; flex: auto; : 30px 0 10px; hiển thị: -webkit-flex: bọc khoảng trắng; : 960px; chiều rộng tối thiểu: 430px; lề: tự động; kích thước hộp: hộp viền: 430px;

Do chúng tôi đã chỉ định flex-grow: 1 cho .main; nó kéo dài đến hết chiều cao sẵn có, từ đó nhấn chân trang xuống phía dưới. Phần thưởng trong giải pháp này là phần chân trang có thể có chiều cao không cố định.

Bây giờ hãy đặt logo và menu vào tiêu đề.
.logo ( font-size: 0; lề: -10px 10px 10px 0; display: flex; flex: none; căn chỉnh-items: center; ) .logo:trước, .logo:after ( content: ""; display: block ; ) .logo:trước ( nền: #222; chiều rộng: 50px; chiều cao: 50px; lề: 0 10px 0 20px; bán kính đường viền: 50%; ) .logo:after ( nền: #222; chiều rộng: 90px; chiều cao : 30px; ) .nav ( lề: -5px 0 0 -5px; hiển thị: -webkit-flex; hiển thị: flex; flex-wrap: bọc; ) .nav-itm ( nền: #222; chiều rộng: 130px; chiều cao: 50px; cỡ chữ: 1.5rem; trang trí văn bản: không có; hiển thị: -webkit-flex;

Vì tiêu đề có flex-wrap: quấn; và biện minh-nội dung: khoảng cách giữa; logo và menu trải rộng khắp tới các bên khác nhau tiêu đề và nếu không có đủ không gian cho menu, nó sẽ di chuyển một cách trang nhã dưới logo.

Tiếp theo, chúng ta thấy một bài đăng hoặc biểu ngữ lớn, thật khó để nói cụ thể nó là gì, nhưng đó không phải là vấn đề. Chúng ta có hình ảnh ở bên phải và văn bản có tiêu đề ở bên trái. Cá nhân tôi tuân thủ ý tưởng rằng mọi yếu tố phải linh hoạt nhất có thể, bất kể bố cục là thích ứng hay tĩnh. Vì vậy, trong bài đăng này, chúng tôi có một thanh bên để đặt một bức ảnh; nói đúng ra, chúng tôi không thể nói chính xác chiều rộng mà chúng tôi cần, bởi vì hôm nay chúng tôi có một bức ảnh lớn, ngày mai là một bức ảnh nhỏ và chúng tôi không muốn làm lại phần tử này. từ đầu mọi lúc. Điều này có nghĩa là chúng ta cần thanh bên ở đúng vị trí cần thiết và phần không gian còn lại sẽ dành cho nội dung. Làm thôi nào:

Hộp ( cỡ chữ: 1,25rem; chiều cao dòng: 1,5; kiểu phông chữ: in nghiêng; lề: 0 0 40px -50px; hiển thị: -webkit-flex; hiển thị: flex; flex-wrap: bọc; biện minh cho nội dung: center; .box-base ( lề trái: 50px; flex: 1 0 430px; ) .box-side ( lề trái: 50px; flex: none; ) .box-img ( max-width: 100%; Height : tự động)

Như bạn có thể thấy đối với .box-base, nơi chúng ta có tiêu đề và văn bản, tôi đã chỉ định độ rộng cơ sở bằng cơ sở linh hoạt: 430px; và cũng bị cấm thu gọn khối bằng cách sử dụng co rút linh hoạt: 0;. Với thao tác này, chúng tôi đã nói rằng nội dung không thể rộng dưới 430px. Và vì thực tế là đối với .box tôi chỉ ra flex-wrap: bọc; thời điểm thanh bên và nội dung không vừa với container.box, thanh bên sẽ tự động nằm bên dưới nội dung. Và tất cả điều này mà không cần ứng dụng @phương tiện truyền thông! Tôi nghĩ điều này thực sự rất tuyệt vời.

Chúng ta còn lại nội dung gồm ba cột. Có một số giải pháp cho vấn đề này, tôi sẽ chỉ cho bạn một trong số đó; có một tùy chọn khác trong các bố cục khác.
Hãy tạo một vùng chứa, gọi nó là .content và định cấu hình nó.
.content ( lề-bottom: 30px; display: -webkit-flex; display: flex; flex-wrap: bọc; )

Vùng chứa có ba cột, .banners, .posts, .comments
.banners ( flex: 1 1 200px; ) .posts ( lề: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( lề: 0 0 30px 30px; flex: 1 1 200px; )

Tôi đã đặt cho các cột chiều rộng cơ bản là 200px để các cột không bị thu hẹp quá nhiều, nhưng sẽ tốt hơn nếu chúng được di chuyển xuống dưới nhau nếu cần.

Theo bố cục, chúng ta sẽ không thể làm gì nếu không có @media với nội dung, vì vậy hãy điều chỉnh hành vi của các cột để có chiều rộng thêm một chút<800px и <600px.
Màn hình @media và (độ rộng tối đa: 800px) ( .banners ( lề trái: -30px; hiển thị: -webkit-flex; hiển thị: flex; flex-basis: 100%; ) .posts ( lề trái: 0; ) ) @media screen và (max-width: 600px) ( .content ( display: block; ) .banners ( lề: 0; display: block; ) .comments ( lề: 0; ) )

Đó là tất cả những điều kỳ diệu khi tạo bố cục trên FlexBox. Một nhiệm vụ khác mà tôi thích là ở bố cục thứ 5, đặc biệt là nó liên quan đến việc điều chỉnh nội dung.

Chúng tôi thấy trên độ phân giải của máy tính để bàn, các bài đăng được tạo thành một lưới ba liên tiếp như thế nào. Khi chiều rộng khung nhìn nhỏ hơn 800px, lưới sẽ chuyển thành một cột chứa các bài đăng, trong đó ảnh bài đăng được xếp xen kẽ ở bên trái và bên phải của nội dung bài đăng. Và nếu chiều rộng nhỏ hơn 600px thì ảnh bài viết sẽ bị ẩn hoàn toàn.
.grid ( display: -webkit-flex; display: flex; flex-wrap: bọc;just-content: space-between; ) .grid-itm ( lề-bottom: 30px; flex-basis: calc(33,33% - 30px * 2/3); hiển thị: -webkit-flex; hiển thị: flex-wrap: bọc; ) .grid-img ( lề: 0 auto 20px; flex: 0 1 80%; ) .grid-cont( flex: 0 1 100%; lưới-img ( flex: 0 0 tự động; ) .grid-itm:nth-child(chẵn) .grid-img ( lề: 0 0 0 30px; thứ tự: 2; ) .grid-itm:nth-child (lẻ) .grid-img ( lề: 0 30px 0 0; ) .grid-cont ( flex: 1 1 auto; ) .grid-title ( text-align: left; ) ) @media screen và (max-width: 600px) ( .grid-img (hiển thị: không có; ) )

Trên thực tế, đây chỉ là một phần nhỏ những gì có thể triển khai được với FlexBox. Đặc tả cho phép bạn xây dựng bố cục trang rất phức tạp bằng cách sử dụng mã đơn giản.

Xin chào Habr!

Một buổi tối đẹp trời, không báo trước điều gì thú vị, cuộc trò chuyện của chúng tôi nhận được lời đề nghị từ tác giả của ấn phẩm “Dịch 5 mẫu đánh dấu đáp ứng thực sự hữu ích thành mã”, mà anh ấy đã viết vào mùa xuân năm 2012, để viết một bài báo làm lại, nhưng sử dụng FlexBox và một lời giải thích kèm theo về những gì và cách thức hoạt động. Sau một số nghi ngờ, sự quan tâm tìm hiểu sâu hơn về đặc tả vẫn chiếm ưu thế và tôi vui vẻ ngồi xuống gõ những ví dụ tương tự đó. Khi chúng tôi đắm mình trong lĩnh vực này, nhiều sắc thái bắt đầu trở nên rõ ràng, điều này phát triển thành một thứ gì đó không chỉ đơn thuần là thiết kế lại bố cục. Nói chung, trong bài viết này, tôi muốn nói về một đặc tả tuyệt vời có tên là “Mô-đun bố cục hộp linh hoạt CSS” và hiển thị một số tính năng cũng như ví dụ ứng dụng thú vị của nó. Tôi vui lòng mời tất cả những ai quan tâm tham gia hack.

Điều tôi muốn bạn chú ý là để tạo bố cục trên FlexBox, nhà phát triển sẽ cần một mức độ thích ứng nào đó. Từ ví dụ của chính mình, tôi cảm thấy kinh nghiệm nhiều năm của mình đang chơi một trò đùa tàn nhẫn. FlexBox yêu cầu một cách suy nghĩ hơi khác về việc sắp xếp các phần tử trong một luồng.

Phần kỹ thuật

Vì thế. Có hai loại phần tử chính trong FlexBox: Flex Container và các phần tử con của nó - Flex Items. Để khởi tạo vùng chứa, chỉ cần gán, thông qua css, cho phần tử hiển thị: linh hoạt; hoặc hiển thị: nội tuyến-flex;. Sự khác biệt giữa flex và inline-flex chỉ ở nguyên tắc tương tác với các phần tử xung quanh container, tương tự như display:block; và hiển thị: inline-block;, tương ứng.

Hướng của các trục có thể được điều khiển bằng thuộc tính css hướng uốn cong. Thuộc tính này nhận một số giá trị:
hàng ngang(mặc định): Trục chính của bộ chứa linh hoạt có cùng hướng với trục nội tuyến của chế độ hướng hàng hiện tại. Điểm bắt đầu (bắt đầu chính) và kết thúc (kết thúc chính) của hướng trục chính tương ứng với điểm bắt đầu (bắt đầu nội tuyến) và kết thúc (kết thúc nội tuyến) của trục nội tuyến.
đảo ngược hàng: Mọi thứ giống như trong hàng, chỉ có main-start và main-end được đổi chỗ cho nhau.
cột: giống như hàng, chỉ có điều bây giờ trục chính được hướng từ trên xuống dưới.
đảo ngược cột: giống như đảo ngược hàng, chỉ có trục chính là hướng từ dưới lên trên.
Bạn có thể thấy cách thức hoạt động của tính năng này trong ví dụ trên jsfiddle.

Để thuận tiện, có một thuộc tính bổ sung dòng chảy linh hoạt, trong đó bạn có thể chỉ định đồng thời hướng uốn cong Và flex-quấn. Nó trông như thế này: dòng chảy linh hoạt:

Các phần tử trong vùng chứa có thể được căn chỉnh bằng thuộc tính nội dung biện minh dọc theo trục chính. Thuộc tính này chấp nhận tối đa năm giá trị khác nhau.
khởi động linh hoạt(mặc định): Các phần tử Flex được căn chỉnh theo điểm gốc của trục chính.
đầu uốn cong: các phần tử được căn chỉnh về cuối trục chính
trung tâm: Các phần tử được căn chỉnh về tâm của trục chính
khoảng cách giữa: các phần tử chiếm toàn bộ chiều rộng có sẵn trong vùng chứa, các phần tử ngoài cùng được ép chặt vào các cạnh của vùng chứa và không gian trống được phân bổ đều giữa các phần tử.
không gian xung quanh: Các phần tử linh hoạt được căn chỉnh sao cho không gian trống được phân bổ đều giữa các phần tử. Nhưng điều đáng chú ý là 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.
Tất nhiên, bạn có thể nhấp vào ví dụ về cách hoạt động của thuộc tính này.

Chúng tôi đã sắp xếp các tham số của vùng chứa linh hoạt, tất cả những gì còn lại là tìm ra các thuộc tính của các phần tử linh hoạt.
Tính chất đầu tiên chúng ta làm quen là đặt hàng. Thuộc tính này cho phép bạn thay đổi vị trí của một phần tử cụ thể trong luồng. Theo mặc định, tất cả các mục linh hoạt đều có thứ tự: 0; và được xây dựng theo trật tự dòng chảy tự nhiên. Trong ví dụ, bạn có thể thấy các phần tử được hoán đổi như thế nào nếu áp dụng các giá trị thứ tự khác nhau cho chúng.

phát triển linh hoạt trên một số tài nguyên, nó có mô tả hoàn toàn không chính xác. Nó nói rằng nó được cho là đặt tỷ lệ kích thước của các phần tử trong vùng chứa. Trên thực tế, điều này là không đúng sự thật. Thuộc tính này chỉ định hệ số mở rộng của phần tử khi có không gian trống trong vùng chứa. Theo mặc định, thuộc tính này có giá trị 0. Hãy tưởng tượng chúng ta có một flex container có chiều rộng 500px, bên trong nó có hai mục flex, mỗi mục có chiều rộng cơ sở là 100px. Điều này để lại 300px không gian trống khác trong vùng chứa. Nếu chúng ta chỉ định flex-grow: 2; cho phần tử đầu tiên và flex-grow: 1; Kết quả là các khối này sẽ chiếm toàn bộ chiều rộng có sẵn của vùng chứa, chỉ có chiều rộng của khối đầu tiên là 300px và khối thứ hai chỉ là 200px. Chuyện gì đã xảy ra thế? Điều đã xảy ra là 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. Đây thực sự là cách nó hoạt động.

Ở đây chúng ta dễ dàng chuyển sang một thuộc tính tương tự khác, cụ thể là co lại. Giá trị mặc định là 1. Nó cũng đặt hệ số thay đổi độ rộng của các phần tử, chỉ theo hướng ngược lại. Nếu container có chiều rộng ít hơn hơn tổng chiều rộng cơ bản của các phần tử thì thuộc tính này có hiệu lực. Ví dụ: vùng chứa có chiều rộng 600px và cơ sở linh hoạt của các phần tử là 300px. Cho phần tử đầu tiên flex-shrink: 2;, và phần tử thứ hai flex-shrink: 1;. Bây giờ hãy thu nhỏ vùng chứa lại 300px. Do đó, tổng chiều rộng của các phần tử lớn hơn vùng chứa 300px. Sự khác biệt này được phân bổ theo tỷ lệ 2:1, vì vậy chúng tôi trừ 200px từ khối đầu tiên và 100px từ khối thứ hai. Kích thước mới của các phần tử lần lượt là 100px và 200px cho phần tử thứ nhất và thứ hai. Nếu chúng ta đặt flex-shrink thành 0 thì chúng ta sẽ ngăn phần tử co lại về kích thước nhỏ hơn chiều rộng cơ sở của nó.

Trên thực tế, đây là mô tả rất đơn giản về cách thức hoạt động của tất cả, để nguyên tắc chung trở nên rõ ràng. Chi tiết hơn, nếu ai quan tâm thì thuật toán sẽ được mô tả trong phần đặc tả.

Thế thôi, tôi chán nó rồi! Hãy cho chúng tôi ví dụ!

Chúng tôi đã sắp xếp lại phần kỹ thuật, hóa ra nó khá dài, nhưng bạn cần phải đi sâu vào nó. Bây giờ chúng ta có thể chuyển sang ứng dụng thực tế.
Trong quá trình phát triển “năm mẫu bố cục đáp ứng thực sự hữu ích” đó, chúng tôi đã phải giải quyết các tình huống điển hình mà các nhà phát triển gặp phải khá thường xuyên. Với flexbox, việc triển khai các giải pháp này trở nên dễ dàng và linh hoạt hơn.
Hãy lấy bố cục thứ 4 tương tự, bởi vì... nó có những yếu tố thú vị nhất.

Đầu tiên, hãy chỉ định chiều rộng chính của trang, căn chỉnh nó vào giữa và nhấn phần chân trang xuống cuối trang. Như mọi khi nói chung.

Vì tiêu đề có flex-wrap: quấn; và biện minh-nội dung: khoảng cách giữa; Logo và menu nằm rải rác ở các phía khác nhau của tiêu đề và nếu không có đủ không gian cho menu, nó sẽ di chuyển một cách trang nhã bên dưới logo.

Vùng chứa có ba cột, .banners, .posts, .comments
.banners ( flex: 1 1 200px; ) .posts ( lề: 0 0 30px 30px; flex: 1 1 200px; ) .comments ( lề: 0 0 30px 30px; flex: 1 1 200px; )

Một nhà phát triển front-end hiện đại phải tích cực có khả năng đưa vào thực tế nhiều công cụ khác nhau cho phép tự động hóa quá trình bố cục bố cục và lập trình thành phần máy khách của dự án. Đối với điều này, đã có nhiều khung, cả lớn và nhỏ, hệ thống xây dựng, trình quản lý gói, rất nhiều gói cho các tác vụ ở mọi cấp độ, bộ tiền xử lý, công cụ tạo mẫu và các “đường” khác được tạo ra để đơn giản hóa và tăng năng suất của một chuyên gia trong lĩnh vực này.

Thật không may, những người mới bắt đầu có thể khó hiểu được sự phong phú của những công cụ này vì họ cần không ngừng phát triển và biết những điều cơ bản về bố cục. Và vì lý do này, nhiều người tiếp tục tạo bố cục kiểu cũ, css thông thường, với một loạt các bộ chọn lặp lại, bố cục mà không hiểu nguyên tắc của các lưới khác nhau, đau đầu với nhiều kiểu căn giữa, v.v.

Nếu trước đó, một triệu năm trước, họ bố trí trên các bảng rồi chuyển sang div, thì bây giờ, không sử dụng flexbox kết hợp với lưới hoặc khung CSS làm sẵn, tôi cảm thấy rằng ngay cả bố cục đơn giản trên div cũng sẽ sớm được xem xét "cách ứng xử tồi". Trường hợp này vẫn chưa xảy ra, nhưng theo như tôi quan sát (hay đúng hơn là tôi thậm chí không có thời gian để quan sát) sự phát triển của nhiều phương pháp và phương pháp hay nhất khác nhau trong lĩnh vực này, thì rất có thể lựa chọn này đang diễn ra.

Tất nhiên, trong ghi chú nhỏ này, tôi sẽ không thể xem xét tất cả các kỹ năng cần có của một mặt trận tốt và các công cụ để làm việc thoải mái, nhưng tôi vẫn sẽ trình bày và nhận xét về một số nguyên tắc cơ bản cho phép bạn bắt đầu và tiếp tục. với các ví dụ.

Bố cục thích ứng

Hãy bắt đầu với bố cục thích ứng, vì đây là chủ đề rất phổ biến do lưu lượng truy cập trên thiết bị di động phát triển nhanh chóng. Để hiểu cách thức hoạt động của các lưới khác nhau và do đó có khả năng thích ứng, chúng ta hãy xem xét các thành phần khối tạo nên bố cục trang và hoạt động đồng thời như các vùng chứa cho các thành phần khác (văn bản, biểu tượng, hình ảnh, v.v.). có thể được đặt theo mặc định hoặc sử dụng định vị). Bố cục truyền thống trên div.

Như bạn đã biết, bất kỳ thành phần khối display: block nào theo mặc định đều chiếm toàn bộ chiều rộng màn hình có sẵn, trừ khi chúng ta xác định rõ ràng chiều rộng của nó (bằng px hoặc %). Nhưng ngay cả khi nó được cung cấp một chiều rộng được xác định theo cách này, phần tử khối tiếp theo sau nó sẽ theo nó trên một dòng mới (nhân tiện, đây là điểm phân biệt khối với nội tuyến, sẽ nối tiếp nhau). Đây là một điểm quan trọng, bạn chỉ cần hiểu nó và để hiểu được, bạn có thể dễ dàng xem vấn đề này trong trình kiểm tra của bất kỳ trình duyệt nào.

Nếu chúng ta cần các phần tử khối liền kề nhau thì chúng ta cần bọc các phần tử đó (float) và cần đặt chiều rộng của các khối theo % để trình duyệt tự động tính chiều rộng theo pixel. Một ví dụ phổ biến là khối nội dung có thanh bên cạnh. Sau khi gói các phần tử, hãy nhớ sử dụng Clearfix, đặt lại gói để không làm hỏng bố cục trong tương lai.

Điều đầu tiên chúng ta cần làm là “thông báo” cho trình duyệt rằng chúng ta muốn sử dụng chế độ xem phản hồi, theo đó bất kỳ trình duyệt nào sẽ mở trang ở chế độ này, điều này được thực hiện bằng cách khai báo giữa các thẻ đầu của tài liệu:

Meta name="viewport" content="width=device-width,initial-scale=1"

Nói cách khác, chiều rộng của thiết bị theo tỷ lệ 1:1. Và nếu bố cục của bạn không được thực hiện thích ứng, thì rất có thể sẽ xảy ra sự cố với cách hiển thị như vậy trong chế độ xem trên thiết bị di động (rất có thể tất cả nội dung sẽ bị nén thành một chiếc đàn accordion, nếu bạn tưởng tượng một cách logic điều gì có thể xảy ra :). Từ giờ trở đi, chúng ta có thể nói về bước tiếp theo, bước này có trong bất kỳ hệ thống lưới hoặc khung thích ứng nào.

Bất kỳ hệ thống lưới nào cũng có điểm dừng, điểm chuyển tiếp. Hãy xem Bootstrap, khi chiều rộng màn hình thay đổi (chế độ xem trên thiết bị di động, máy tính bảng, v.v.), phần tử có lớp cột hiện tại sẽ được chọn (ví dụ: lớp máy tính để bàn cho một cột, trong khung Bootstrap phổ biến, là col -md-(x ), md - máy tính để bàn). Lần lượt, các lớp chỉ định chiều rộng khác nhau theo % bằng (100/12) x, trong đó x là hệ số chiều rộng, từ 1 đến 12.

Các lớp cột mô tả hành vi của các phần tử gói: nếu có một lớp (đồng thời, lớp đó có thể dành cho các thiết bị khác nhau) - gói được đặt, nếu không - chiều rộng là 100% (điển hình để trình bày nội dung trên thiết bị di động ). Và hành vi này được thực hiện bằng cách sử dụng truy vấn phương tiện mà tất cả các trình duyệt đều hiểu. Truy vấn phương tiện - trong CSS, khái niệm này có nghĩa là một quy tắc, khi các điều kiện được đáp ứng, các kiểu tương ứng sẽ được kết nối, ví dụ: chiều rộng đã trở nên nhỏ hơn 600px - chúng tôi kết nối một khối kiểu mới ghi đè kiểu cũ. Ví dụ: lớp cột col-md-(x) được bật theo mặc định từ 992px trở lên và bị tắt tối đa 992px. Nhưng tất cả các điểm dừng khởi động mặc định có thể bị bạn ghi đè khi biên dịch lưới.

Đó là tất cả các cơ chế đơn giản với các div cần được cung cấp chiều rộng tính bằng %, float:left; và xóa phần bao bọc sau các cột (trong bootstrap, các cột được bao bọc trong một lớp bao bọc có lớp hàng trong trường hợp này), chúng ta xếp thành một hàng. Bạn có thể dễ dàng tự thực hiện tất cả những điều này mà không cần bất kỳ lưới nào, khi bạn có ý tưởng về cách thức hoạt động, các lớp chỉ được viết trong bất kỳ lưới nào và rất nhiều mã đã được viết, nhiệm vụ của bạn vẫn là gán các lớp cho các phần tử, đó là tất cả.

Chúng ta sẽ đi xa hơn một chút và xem xét một lựa chọn khác. Bằng cách sử dụng Flexbox, đồng thời trong thực tế, chúng tôi sẽ tạo một khung nhỏ của trang thích ứng bằng công nghệ bố cục mới này. Nói chung, nói một cách đại khái, sự uốn cong cho phép chúng ta tránh khỏi những vấn đề đau đầu như căn giữa, căn chỉnh ngang và dọc trong một thùng chứa. Và kết hợp với các truy vấn phương tiện, hãy ghi nhớ các cơ chế được mô tả ở trên, bạn có thể xây dựng một mẫu thích ứng chất lượng rất cao với bất kỳ căn chỉnh nào, cả theo chiều dọc và chiều ngang. Nói chung, chúng tôi chơi như chúng tôi muốn.

Ở đây tôi muốn lưu ý rằng chiều rộng được chỉ định bằng %, như trong trường hợp vùng nội dung và thanh bên (đầu trang và chân trang theo mặc định chiếm toàn bộ chiều rộng, 100%), ngay lập tức được tự động tính toán lại khi thay đổi kích thước (hoặc mở trang). trên màn ảnh nhỏ). Đây có lẽ là quy tắc chính, đặt mọi thứ theo %, trình duyệt sẽ tự thực hiện phần còn lại.

Thích ứng đơn giản

tiêu đề (logo, v.v.)

nội dung

Bây giờ chúng ta chỉ có văn bản trong div, hãy thực hành căn chỉnh văn bản (theo chiều ngang/dọc). Một cách thực hành tốt khác là loại trừ chân trang khỏi trình bao bọc chung, đặt html và nội dung, chiều cao: 100%, thành trình bao bọc: chiều cao tối thiểu: 100%, để chân trang luôn được nhấn xuống cuối trang.

Tôi đã quen sử dụng scss, đây là danh sách mã cho nó:

$xám: #808080; $h: 50px; html, nội dung ( lề: 0; chiều cao: 100%; ) nội dung ( họ phông chữ: monospace, sans-serif; text-transform: chữ hoa; ) .row ( display: flex; ) .vertical-center ( căn chỉnh các mục: center; justify-content: center; ) .wrap ( min-height: 100%; header, .content, .sidebar ( border: 1px Solid $grey; ) header ( Height: $h; ) .content ( Height: 100px; phần đệm: 15px 15px 0 15px; lề phải: 1%; chiều rộng: 75% chiều rộng: 25%; ) ) chân trang ( chiều cao: $h; đường viền: 1px màu xám; )

hiển thị: linh hoạt; - TRÊN bối cảnh linh hoạt; thuộc tính flex-direction: row; - theo mặc định, trừ khi chúng tôi chỉ định cột một cách rõ ràng. Đây là điều cho phép chúng ta làm được nhiều điều tuyệt vời. Tôi không hoàn toàn chắc chắn, nhưng có vẻ như thuộc tính này không được caniuse hỗ trợ ở mọi nơi, nhưng đã đến lúc loại bỏ tất cả các trình duyệt cũ này và cài đặt những trình duyệt hiện đại, phải không? :)

Chúng tôi cũng đặt tỷ lệ cho chiều rộng của nội dung - thanh bên, 75% : 25%. Hiệu quả tương tự sẽ đạt được nếu sử dụng bootstrap. Chỉ với các lớp col-md-9 cho nội dung ((100/12 · 9)% - chiều rộng theo phần trăm, 75) và col-md-3 cho thanh bên ((100/12 · 3)% - chiều rộng theo phần trăm , 25)

Vì vậy, hãy hiểu chuyện gì đang xảy ra và Flexbox hoạt động như thế nào. Ví dụ, điều đầu tiên là đặt display:flex thành vùng chứa mà chúng ta cần căn giữa. Trong phần đánh dấu, tôi có đầu trang, chân trang và vùng chứa, bên trong có nội dung và thanh bên. Điều đơn giản nhất mà Flexbox thực hiện một cách hiệu quả ở đây chỉ đơn giản là lấy và căn chỉnh văn bản ở đầu trang và chân trang bằng cách sử dụng lớp .vertical-center:

.vertical-center ( căn chỉnh-items: center; // căn về giữa, căn đều theo chiều dọc: center; // căn về giữa, ngang )

Kết quả là văn bản được căn chỉnh theo hai hướng, ở đầu trang và chân trang. Phần giữa vẫn ở đây, nếu chúng ta không đặt display:flex, thì mặc định sẽ vẫn là display:block, cuối cùng, các khối nội dung và thanh bên sẽ trở thành như thế này:

Những thứ kia. vị trí cái này bên dưới cái kia. Và việc chúng được cấp chiều rộng không thành vấn đề, chúng sẽ phải quấn quanh chúng. Nhưng đây thậm chí không phải là sự tiện lợi của Flexbox. Vấn đề không phải là rút ngắn mã bằng một lệnh mà vì với sự trợ giúp của một số thuộc tính tuyệt vời hơn mà chúng ta có thể đặt thành Flexbox, chúng ta có thể căn giữa các khối có độ rộng khác nhau theo hai hướng, cũng như văn bản (giữa, dọc/ ngang, ở đầu, ở cuối)!

Nhưng trước khi chuyển sang vấn đề chính mà ghi chú này được tạo ra, hãy cải thiện bố cục đơn giản của chúng ta một chút về khả năng phản hồi. Bây giờ, khi thay đổi kích thước, nội dung và thanh bên không xếp chồng lên nhau. Điều này cần phải được khắc phục, vì hãy tưởng tượng rằng tất cả văn bản ở độ phân giải thấp sẽ bị “nén” khó coi trong vùng nội dung và thanh bên. Tôi thậm chí không nói về những bức ảnh. Nhân tiện, hình ảnh có tính thích ứng phải được cung cấp:

img(display:block; chiều rộng tối đa:100%; chiều cao:tự động; )

Hãy sử dụng truy vấn phương tiện. Hãy cải thiện css của chúng ta, tôi sẽ không viết lại tất cả, tôi sẽ chỉ để lại // ... * nơi vẫn giữ nguyên mã:

// .. $mobileBreak: 479px; html, body ( // ... ) body ( // ... ) .row ( // ... ) .middle ( @media (max-width: $mobileBreak) ( display: block; ) ) .vertical- center ( // ... ) .wrap ( // ... tiêu đề, .content, .sidebar ( // ... ) tiêu đề ( // ... ) .content ( // ... @media (max -width: $mobileBreak) ( width: auto; lề-phải: 0; ) ) .sidebar ( // ... @media (max-width: $mobileBreak) ( width: auto; ) ) chân trang ( // . . .)

Bây giờ thanh bên sẽ gập xuống dưới nội dung trên điện thoại (<480px):

Làm việc với sự sắp xếp

Để thử nghiệm, hãy tạo trong khối nội dung một số quả bóng chứa đầy các màu khác nhau để chúng được căn chỉnh theo chiều ngang và chiều dọc trong khu vực nội dung, để làm điều này, chúng tôi thêm html:

// ... $mobileBreak: 479px; @mixin wh($w, $h) ( chiều rộng: $w; chiều cao: $h; ) // ... .content ( // ... phần đệm-top: 0; .content-inner ( chiều cao: 100% ); : #D9534F; ) .green ( nền: #6AB181; ) .blue ( nền: #2D8CD3; ) .wh50 ( @include wh(50px, 50px); ) .wh60 ( @include wh(60px, 60px); ) . wh35 ( @include wh(35px, 35px); ) ) @media (độ rộng tối đa: $mobileBreak) ( // ... ) ) // ...

Một lần nữa, nơi có các dấu hiệu, // ..., mã vẫn giữ nguyên.

Kết quả:

Như bạn có thể thấy, các quả bóng được căn chỉnh hoàn hảo. Khi thêm bóng mới, việc lên cấp cũng sẽ diễn ra mà không gặp vấn đề gì. thuộc tính căn chỉnh-mục: giữa; chịu trách nhiệm căn chỉnh theo chiều dọc và justify-content: space-between; sắp xếp đều theo chiều ngang.

căn chỉnh các mục: flex-start; thực hiện điều này:

Bằng cách tương tự, sau khi áp dụng các mục căn chỉnh: flex-end; các quả bóng kết thúc ở dưới cùng của thùng chứa và sắp xếp các mục: đường cơ sở; thực hiện điều này:

Ngoài ra còn có một thuộc tính Align-items: Stretch;, nó dường như kéo dài từng phần tử theo chiều cao, nhưng tôi không thể triển khai nó nhanh chóng nên tôi sẽ không cho bạn xem ảnh chụp màn hình.

Tất cả điều này áp dụng cho vị trí trục ngang (mặc định). Nhưng nếu chúng ta tạo cột rõ ràng:

.content-inner (flex-direction: cột; )

Sau đó các quả bóng sẽ trở nên thẳng đứng! Và một lần nữa, bằng cách sử dụng các thuộc tính khác nhau của các mục căn chỉnh, chúng ta sẽ đạt được mọi thứ đạt được khi xây dựng các quả bóng theo chiều ngang, nhưng chỉ theo chiều dọc! Ngoài ra còn có thuộc tính Align-self, nó ghi đè thuộc tính Align-items cho một quả bóng hoặc một nhóm. Bằng cách này bạn có thể quản lý linh hoạt mọi sự sắp xếp.

Trong ghi chú ngắn này, chúng ta đã xem xét các kiến thức cơ bản về bố cục thích ứng, chính xác hơn là các cơ chế cho phép các thành phần trên trang thích ứng với các độ phân giải khác nhau, đồng thời cũng xem xét các kiến thức cơ bản về bố cục flexbox. Tôi hy vọng bài viết sẽ hữu ích chủ yếu cho những người không muốn lấy toàn bộ bootstrap khổng lồ chỉ vì một lưới mà sẽ lấy nó và tạo lưới của riêng họ, dựa trên tài liệu của bài học này.

Chà, tóm lại, Flexbox rất tuyệt, nhưng bạn vẫn cần sử dụng nó cẩn thận nếu cần hỗ trợ cho các phiên bản trình duyệt cũ hơn.

Tại sao Flexbox?

Trong một thời gian dài, các công cụ tương thích với nhiều trình duyệt đáng tin cậy duy nhất có sẵn để tạo bố cục CSS là những thứ như float và định vị. Những điều này đều ổn và hiệu quả, nhưng ở một khía cạnh nào đó, chúng cũng khá hạn chế và gây khó chịu.

Các yêu cầu bố cục đơn giản sau đây khó hoặc không thể đạt được bằng các công cụ như vậy, theo bất kỳ cách thuận tiện, linh hoạt nào:

Căn giữa theo chiều dọc một khối nội dung bên trong phần tử mẹ của nó.
Làm cho tất cả các phần tử con của vùng chứa chiếm một lượng chiều rộng/chiều cao có sẵn bằng nhau, bất kể chiều rộng/chiều cao có sẵn là bao nhiêu.
Làm cho tất cả các cột trong bố cục nhiều cột có cùng chiều cao ngay cả khi chúng chứa lượng nội dung khác nhau.

Như bạn sẽ thấy trong các phần tiếp theo, flexbox khiến nhiều tác vụ bố cục trở nên dễ dàng hơn nhiều. Hãy cùng tìm hiểu sâu hơn!

Giới thiệu một ví dụ đơn giản

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn thực hiện một loạt bài tập để giúp bạn hiểu cách hoạt động của flexbox. Để bắt đầu, bạn nên tạo một bản sao cục bộ của tệp khởi động đầu tiên - flexbox0.html từ kho lưu trữ github của chúng tôi - tải nó trong trình duyệt hiện đại (như Firefox hoặc Chrome) và xem mã trong trình chỉnh sửa mã của bạn. Bạn cũng có thể.

Hướng linh hoạt: cột;

Bạn sẽ thấy rằng thao tác này sẽ đưa các mục trở lại bố cục cột, giống như trước khi chúng ta thêm bất kỳ CSS nào. Trước khi tiếp tục, hãy xóa phần khai báo này khỏi ví dụ của bạn.

Ghi chú: Bạn cũng có thể bố trí các mục linh hoạt theo hướng ngược lại bằng cách sử dụng các giá trị đảo ngược hàng và đảo ngược cột. Hãy thử nghiệm với những giá trị này!

gói

Một vấn đề nảy sinh khi bạn có một mức chiều rộng hoặc chiều cao cố định trong bố cục của mình là cuối cùng các phần tử con flexbox của bạn sẽ tràn vùng chứa của chúng, phá vỡ bố cục. Hãy xem ví dụ flexbox-wrap0.html của chúng tôi và thử xem trực tiếp (lấy bản sao cục bộ của tệp này ngay bây giờ nếu bạn muốn làm theo ví dụ này):

Ở đây chúng ta thấy rằng những đứa trẻ thực sự đang thoát ra khỏi chiếc hộp đựng của mình. Một cách để bạn có thể khắc phục điều này là thêm khai báo sau vào phần tử của bạn để biểu thị một phần độc lập - phần này không có phần tử ngữ nghĩa cụ thể hơn để thể hiện phần đó có trong tài liệu html.>

luật lệ:

Flex-quấn: quấn; linh hoạt: 200px;

Hãy thử ngay bây giờ; bạn sẽ thấy bố cục trông đẹp hơn nhiều khi bao gồm:

Bây giờ chúng ta có nhiều hàng - vì nhiều hàng flexbox con được gắn vào mỗi hàng một cách hợp lý và bất kỳ phần tràn nào sẽ được chuyển xuống dòng tiếp theo. Khai báo flex: 200px được đặt trên các bài viết có nghĩa là mỗi bài viết sẽ có chiều rộng tối thiểu là 200px; chúng ta sẽ thảo luận về thuộc tính này chi tiết hơn sau. Bạn cũng có thể nhận thấy rằng một số phần tử con cuối cùng ở hàng cuối cùng được làm rộng hơn để toàn bộ hàng vẫn được lấp đầy.

Nhưng còn nhiều điều chúng ta có thể làm ở đây. Trước hết, hãy thử thay đổi giá trị thuộc tính flex-direction của bạn thành row-reverse - bây giờ bạn sẽ thấy rằng bạn vẫn có bố cục nhiều hàng, nhưng nó bắt đầu từ góc đối diện của cửa sổ trình duyệt và chảy ngược lại.

tốc ký dòng chảy linh hoạt

Tại thời điểm này, cần lưu ý rằng có một cách viết tắt cho flex-direction và flex-wrap - flex-flow . Vì vậy, ví dụ, bạn có thể thay thế

Hướng linh hoạt: hàng; flex-wrap: bọc;

Dòng chảy linh hoạt: bọc hàng;

Kích thước linh hoạt của các mục linh hoạt

Bây giờ chúng ta hãy quay lại ví dụ đầu tiên của chúng ta và xem cách chúng ta có thể kiểm soát tỷ lệ chiếm dụng không gian của các mục flexbox0.html hoặc lấy một bản sao của flexbox1.html làm điểm bắt đầu mới ( xem nó). sống).

Đầu tiên, thêm quy tắc sau vào cuối CSS của bạn:

Bài viết (flex: 1; )

Đây là giá trị tỷ lệ không có đơn vị, cho biết lượng không gian có sẵn dọc theo trục chính mà mỗi mục linh hoạt sẽ chiếm. Trong trường hợp này, chúng tôi đang cung cấp cho mỗi element a value of 1, which means they will all take up an equal amount of the spare space left after things like padding and margin have been set. It is a proportion, meaning that giving each flex item a value of 400000 would have exactly the same effect.!}

Bây giờ hãy thêm quy tắc sau vào bên dưới quy tắc trước:

Bài viết:loại thứ n(3) ( flex: 2; )

Mục - bài viết bài viết - div - nút nút div nút nút div nút nút

Hãy xem mã chúng tôi đã sử dụng cho bố cục.

Bản tóm tắt

Điều đó kết thúc chuyến tham quan cơ bản của chúng tôi về flexbox. Chúng tôi hy vọng bạn đã vui vẻ và sẽ có trải nghiệm vui vẻ khi tiếp tục học tập. Tiếp theo chúng ta sẽ xem xét một khía cạnh quan trọng khác của bố cục CSS - Lưới CSS.