CSS Flexbox
biện minh cho nội dungThuộc tính được sử dụng để căn chỉnh các mục flex Show
biện minh cho nội dung. khởi động linh hoạt;biện minh cho nội dung. kết thúc uốn cong;biện minh cho nội dung. trung tâm;biện minh cho nội dung. không gian giữa;biện minh cho nội dung. không gian xung quanh;biện minh cho nội dung. không gian đều;Flexbox là một chế độ bố trí mạnh mẽ đáng chú ý. Khi chúng tôi thực sự hiểu cách thức hoạt động của nó, chúng tôi có thể tạo bố cục động tự động phản hồi, tự sắp xếp lại khi cần Ví dụ: kiểm tra cái này Tên. E-mail. Nộp Chiều rộng vùng chứa. 600 Kéo tôi Bản demo này được lấy cảm hứng rất nhiều từ codepen đáng kinh ngạc “4 bố cục với giá 1” của Adam Argyle. Nó không sử dụng truy vấn phương tiện/vùng chứa. Thay vì đặt các điểm ngắt tùy ý, nó sử dụng các nguyên tắc linh hoạt để tạo bố cục trôi chảy liền mạch Đây là CSS có liên quan
Tôi nhớ mình đã chạy vào các bản demo như thế này và hoàn toàn bối rối. Tôi biết những điều cơ bản về Flexbox, nhưng điều này có vẻ giống như một phép thuật tuyệt đối Trong bài đăng trên blog này, tôi muốn tinh chỉnh mô hình tinh thần của bạn cho Flexbox. Chúng ta sẽ xây dựng trực giác về cách hoạt động của thuật toán Flexbox, bằng cách tìm hiểu về từng thuộc tính này. Cho dù bạn là người mới bắt đầu sử dụng CSS hay bạn đã sử dụng Flexbox trong nhiều năm, tôi cá là bạn sẽ học được khá nhiều Làm thôi nào Cảnh báo nội dungTôi tạo một phép ẩn dụ liên quan đến thực phẩm sau trong hướng dẫn này Cách tốt hơn trên máy tính để bànHướng dẫn này có rất nhiều bản trình diễn tương tác và một số bản trình diễn này thực sự không hoạt động tốt trên các thiết bị nhỏ hơn Tôi đã cố gắng hết sức để làm cho chúng thân thiện với thiết bị di động, nhưng để có trải nghiệm tốt nhất, tôi khuyên bạn nên xem qua hướng dẫn này trên máy tính để bàn, máy tính xách tay hoặc máy tính bảng Giới thiệu về FlexboxCSS bao gồm nhiều thuật toán bố cục khác nhau, được gọi chính thức là “chế độ bố cục”. Mỗi chế độ bố cục là ngôn ngữ con nhỏ của riêng nó trong CSS. Chế độ bố cục mặc định là Bố cục luồng, nhưng chúng tôi có thể chọn tham gia Flexbox bằng cách thay đổi thuộc tính 40 trên vùng chứa chính Xin chào đến các thế giới trục chính trục chính trưng bày khối dẻo Khi chúng tôi lật 40 sang 42, chúng tôi tạo ra một “bối cảnh định dạng linh hoạt”. Điều này có nghĩa là theo mặc định, tất cả phần tử con sẽ được định vị theo thuật toán bố cục Flexbox Vậy Flexbox giải quyết vấn đề gì? . Như tên cho thấy, Flexbox là tất cả về tính linh hoạt. Chúng tôi có thể kiểm soát xem các mục tăng hay giảm, cách phân bổ không gian thừa, v.v. Nó vẫn còn liên quan?bạn có thể tự hỏi. bây giờ CSS Grid đã được hỗ trợ tốt trong các trình duyệt hiện đại, Flexbox có lỗi thời không? CSS Grid là một chế độ bố cục tuyệt vời, nhưng nó giải quyết các vấn đề khác với Flexbox. Chúng ta nên tìm hiểu cả hai chế độ bố cục và sử dụng công cụ phù hợp cho công việc Flexbox vẫn thống trị tối cao khi nói đến giao diện người dùng linh hoạt, linh hoạt giúp sắp xếp các mục theo danh sách dọc hoặc ngang. Chúng ta sẽ xem một ví dụ trong hướng dẫn này, bánh kếp được giải cấu trúc, không thể dễ dàng hoàn thành với CSS Grid Thành thật mà nói, là một người cảm thấy thoải mái với cả CSS Grid và Flexbox, tôi vẫn thấy mình tiếp cận với Flexbox khá thường xuyên hướng linh hoạtNhư đã đề cập, Flexbox tập trung vào việc kiểm soát việc phân phối các phần tử trong một hàng hoặc cột. Theo mặc định, các mục sẽ xếp cạnh nhau trong một hàng, nhưng chúng ta có thể chuyển sang một cột bằng thuộc tính 0 Hiển thị trục chính Xin chào đến các thế giới trục chính trục chính hướng uốn cột hàng Với 1, trục sơ cấp chạy ngang, từ trái sang phải. Khi ta lật sang 2 thì trục sơ cấp chạy dọc, từ trên xuống dưới Trong Flexbox, mọi thứ đều dựa trên trục chính. Thuật toán không quan tâm đến chiều dọc/ngang hoặc thậm chí hàng/cột. Tất cả các quy tắc được cấu trúc xung quanh trục chính này và trục chéo chạy vuông góc Cái này hay đấy. Khi chúng tôi tìm hiểu các quy tắc của Flexbox, chúng tôi có thể chuyển đổi liền mạch từ bố cục ngang sang bố cục dọc. Tất cả các quy tắc tự động điều chỉnh. Tính năng này là duy nhất cho chế độ bố cục Flexbox Các con sẽ được định vị mặc định theo 2 quy tắc sau
Dưới đây là hình dung nhanh về các quy tắc này Trong Flexbox, chúng tôi quyết định xem trục chính chạy theo chiều ngang hay chiều dọc. Đây là gốc mà tất cả các tính toán Flexbox được gắn vào căn chỉnhChúng ta có thể thay đổi cách phân phối con dọc theo trục chính bằng cách sử dụng thuộc tính 3 Hiển thị trục chính Xin chào đến các Thế giới trục chính trục chính hướng uốn hàng ngang biện minh cho nội dung khởi động linh hoạt Khi nói đến trục chính, chúng ta thường không nghĩ đến việc căn chỉnh một đứa trẻ. Thay vào đó, tất cả là về sự phân bố của nhóm Chúng ta có thể gom tất cả các mục vào một vị trí cụ thể (với 4, 5 và 6) hoặc chúng ta có thể tách chúng ra (với 7, 8 và 9) Đối với trục chéo, mọi thứ hơi khác một chút. Chúng tôi sử dụng tài sản 10 Hiển thị trục chính Xin chào đến các Thế giới trục chính trục chính hướng uốn hàng ngang biện minh cho nội dung khởi động linh hoạt sắp xếp các mục. Mới mẻ căng ra Thật thú vị… Với 10, chúng tôi có một số tùy chọn giống như 3, nhưng không có sự trùng lặp hoàn hảo biện minh cho nội dung sắp xếp các mục không gian giữa không gian xung quanh không gian đều căng ra đường cơ sở khởi động linh hoạt trung tâm kết thúc uốn cong Tại sao họ không chia sẻ các lựa chọn giống nhau? . 13 Không giống như 3 và 10, 13 được áp dụng cho phần tử con, không phải vùng chứa. Nó cho phép chúng ta thay đổi căn chỉnh của một đứa trẻ cụ thể dọc theo trục chéo Hiển thị trục chính Xin chào đến các thế giới trục chính trục chính hướng uốn hàng ngang tự sắp xếp căng ra 13 có tất cả các giá trị giống như 10. Trên thực tế, họ thay đổi chính xác điều tương tự. 10 là đường cú pháp, một cách viết tắt tiện lợi tự động đặt căn chỉnh trên tất cả các phần tử con cùng một lúc Không có 10 * . Để hiểu tại sao không, chúng ta cần tìm hiểu sâu hơn về thuật toán Flexbox. Nội dung so với. mặt hàngVì vậy, dựa trên những gì chúng ta đã học được cho đến nay, Flexbox có vẻ khá độc đoán. Tại sao lại là 3 và 10 mà không phải là 13 hay 14? Đối với vấn đề đó, tại sao lại có 13 mà không phải là 16?? Những câu hỏi này tập trung vào một trong những điều quan trọng và hay bị hiểu lầm nhất về Flexbox. Để giúp tôi giải thích, tôi muốn sử dụng một phép ẩn dụ Trong Flexbox, các mục được phân phối dọc theo trục chính. Theo mặc định, chúng được sắp xếp đẹp mắt, cạnh nhau. Tôi có thể vẽ một đường thẳng nằm ngang xiên tất cả bọn trẻ, chẳng hạn như kebab ? . Trục chéo là khác nhau, mặc dù. Một đường thẳng đứng sẽ chỉ cắt một trong những đứa trẻ Nó không giống kebab mà giống một nhóm máy kẹp xúc xích kiểu cocktail hơn? . Có một sự khác biệt đáng kể ở đây. Với dụng cụ kẹp cocktail, mỗi vật phẩm có thể di chuyển dọc theo que của nó mà không ảnh hưởng đến bất kỳ vật phẩm nào khác Ngược lại, với trục chính của chúng tôi xiên từng anh chị em, một vật phẩm không thể di chuyển dọc theo thanh của nó mà không va vào anh chị em của nó. Hãy thử kéo mảnh giữa bên này sang bên kia Đây là sự khác biệt cơ bản giữa trục chính/trục chéo. Khi chúng ta đang nói về sự liên kết trong trục chéo, mỗi mục có thể làm bất cứ điều gì nó muốn. Tuy nhiên, trong trục chính, chúng ta chỉ có thể nghĩ về cách phân phối nhóm Đó là lý do tại sao không có 10. Điều đó có ý nghĩa gì đối với mảnh ở giữa đó để đặt 18? Với tất cả bối cảnh này, chúng ta hãy đưa ra một định nghĩa phù hợp cho cả 4 thuật ngữ mà chúng ta đã nói đến
Và vì thế. chúng tôi có 3 để kiểm soát phân phối của nhóm dọc theo trục chính và chúng tôi có 10 để định vị từng mục riêng lẻ dọc theo trục chéo. Đây là hai thuộc tính chính mà chúng tôi sử dụng để quản lý bố cục với Flexbox Không có 5 vì lý do tương tự như không có 10; Còn 7 thì sao? . Chúng ta sẽ đề cập đến nó sau một chút, khi chúng ta nói về tài sản 8 kích thước giả thuyếtHãy nói về một trong những nhận thức mở mang tầm mắt nhất của tôi về Flexbox Giả sử tôi có CSS sau
Một người hợp lý có thể nhìn vào điều này và nói. “được rồi, vậy chúng ta sẽ lấy một mục có chiều rộng 2000 pixel”. Nhưng điều đó sẽ luôn luôn đúng? Hãy kiểm tra nó sân chơi mật mãĐịnh dạng mã bằng cách sử dụng Prettier đặt lại mã CSS HTML 1 Kết quả Làm mới khung kết quả Bật phím 'tab'Điều này thật thú vị phải không? Cả hai mục đều được áp dụng CSS giống hệt nhau. Họ từng có 9. Chưa hết, mục đầu tiên rộng hơn nhiều so với mục thứ hai Sự khác biệt là chế độ bố trí. Mục đầu tiên đang được hiển thị bằng cách sử dụng bố cục Luồng và trong bố cục Luồng, 30 là một ràng buộc cứng. Khi chúng tôi đặt 9, chúng tôi sẽ nhận được một phần tử rộng 2000 pixel, ngay cả khi nó phải vượt qua một bên của khung nhìn như anh chàng Kool-Aid Tuy nhiên, trong Flexbox, thuộc tính 30 được triển khai khác. Đó là một gợi ý hơn là một ràng buộc cứng Thông số kỹ thuật có một tên cho điều này. kích thước giả thuyết. Đó là kích thước của một yếu tố, trong một thế giới không tưởng hoàn hảo, không có gì cản trở Than ôi, mọi thứ hiếm khi đơn giản như vậy. Trong trường hợp này, yếu tố giới hạn là cha mẹ không có chỗ cho con rộng 2000px. Và như vậy, kích thước của đứa trẻ được giảm xuống để phù hợp với Đây là một phần cốt lõi của triết lý Flexbox. Mọi thứ trôi chảy và linh hoạt và có thể điều chỉnh theo những hạn chế của thế giới Đầu vào cho các thuật toánChúng ta có xu hướng nghĩ về ngôn ngữ CSS như một tập hợp các thuộc tính, nhưng tôi nghĩ đó là mô hình tinh thần sai lầm. Như chúng ta đã thấy, thuộc tính 30 hoạt động khác nhau tùy thuộc vào chế độ bố cục được sử dụng Thay vào đó, tôi thích coi CSS như một tập hợp các chế độ bố cục. Mỗi chế độ bố cục là một thuật toán có thể triển khai hoặc xác định lại từng thuộc tính CSS. Chúng tôi cung cấp một thuật toán với các khai báo CSS (cặp khóa/giá trị) và thuật toán quyết định cách sử dụng chúng Nói cách khác, CSS mà chúng ta viết là đầu vào cho các thuật toán này, giống như các đối số được truyền cho một hàm. Nếu chúng ta muốn thực sự cảm thấy thoải mái với CSS, thì việc tìm hiểu các thuộc tính thôi là chưa đủ; Đây là triết lý trung tâm được thực hiện trong khóa học của tôi, CSS dành cho nhà phát triển JavaScript. Thay vì yêu cầu bạn ghi nhớ một loạt các đoạn mã CSS khó hiểu, chúng tôi giới thiệu ngôn ngữ này và tìm hiểu cách hoạt động của tất cả các chế độ bố cục Lớn lên và thu hẹp lạiVì vậy, chúng ta đã thấy rằng thuật toán Flexbox có một số tính linh hoạt được tích hợp sẵn, với các kích thước giả định. Nhưng để thực sự thấy Flexbox linh hoạt như thế nào, chúng ta cần nói về 3 thuộc tính. 34, 35 và 36 Hãy xem xét từng tài sản cơ sở linh hoạtTôi thừa nhận nó. trong một thời gian dài, tôi thực sự không hiểu thỏa thuận với 36 là gì. 😅 Nói một cách đơn giản. Trong một hàng Flex, 36 làm điều tương tự như 30. Trong cột Flex, 36 thực hiện tương tự như 41 Như chúng ta đã biết, mọi thứ trong Flexbox được chốt vào trục chính/trục chéo. Ví dụ: 3 sẽ phân phối con dọc theo trục chính và nó hoạt động giống hệt nhau cho dù trục chính chạy theo chiều ngang hay chiều dọc Tuy nhiên, 30 và 41 không tuân theo quy tắc này. 30 sẽ luôn ảnh hưởng đến kích thước ngang. Nó không đột nhiên trở thành 41 khi chúng ta lật 0 từ 48 sang 49 Và vì vậy, các tác giả của Flexbox đã tạo ra một thuộc tính "kích thước" chung có tên là 36. Nó giống như 30 hoặc 41, nhưng được chốt vào trục chính, giống như mọi thứ khác. Nó cho phép chúng tôi đặt kích thước giả định của một phần tử theo hướng trục chính, bất kể đó là ngang hay dọc Cung cấp cho nó một shot ở đây. Tất cả 4 đứa trẻ đã được tặng 403, nhưng bạn có thể điều chỉnh đứa trẻ đầu tiên Hiển thị trục chính trục chính trục chính hướng uốn cột hàng cơ sở linh hoạt. 50 Giống như chúng ta đã thấy với 30, 36 giống một gợi ý hơn là một ràng buộc cứng. Tại một thời điểm nhất định, không có đủ không gian cho tất cả các phần tử ở kích thước được chỉ định của chúng và vì vậy chúng phải thỏa hiệp để tránh trànKhông hoàn toàn giống nhau Nói chung, chúng ta có thể sử dụng 30 và 36 thay thế cho nhau trong một hàng Flex, nhưng có một số trường hợp ngoại lệ. Ví dụ: thuộc tính 30 ảnh hưởng đến các phần tử được thay thế như hình ảnh khác với 36. Ngoài ra, 30 có thể giảm một mục xuống dưới kích thước tối thiểu của nó, trong khi 36 không thể Nó nằm ngoài phạm vi của bài đăng trên blog này, nhưng tôi muốn đề cập đến nó, bởi vì đôi khi bạn có thể gặp phải các trường hợp cạnh trong đó hai thuộc tính có tác dụng khác nhau uốn congTheo mặc định, các phần tử trong ngữ cảnh Flex sẽ thu nhỏ xuống kích thước thoải mái tối thiểu dọc theo trục chính. Điều này thường tạo thêm không gian Chúng ta có thể chỉ định cách sử dụng không gian đó với thuộc tính 34 0 trục chính trục chính hướng uốn cột hàng uốn cong 0 (mặc định)1 Giá trị mặc định cho 34 là 0, có nghĩa là việc tăng trưởng được chọn tham gia. Nếu chúng ta muốn một đứa trẻ ngấu nghiến thêm bất kỳ khoảng trống nào trong thùng chứa, chúng ta cần nói rõ ràng với nó như vậy. Nếu nhiều trẻ em đặt 34 thì sao? Tôi nghĩ sẽ dễ dàng hơn để giải thích trực quan. Hãy thử tăng/giảm từng đứa trẻ uốn cong 12 giảm Tăng uốn cong 12 giảm Tăng trục chính trục chính Đứa thứ nhất muốn thêm 1 đơn vị không gian, trong khi đứa thứ hai muốn thêm 1 đơn vị. Điều đó có nghĩa là tổng # đơn vị là 2 (1 + 1). Mỗi đứa trẻ nhận được một phần tỷ lệ của không gian thêm đó uốn congTrong hầu hết các ví dụ mà chúng tôi đã thấy cho đến nay, chúng tôi đã có thêm không gian để làm việc với. Nhưng nếu con cái chúng ta quá lớn so với thùng chứa của chúng thì sao? Hãy kiểm tra nó. Hãy thử thu nhỏ vùng chứa để xem điều gì sẽ xảy ra flex-basis 300px Giảm bởi. 0% flex-basis 150px Giảm bởi. 0% trục chính trục chính Chiều rộng vùng chứa. 600 Thú vị đúng không? . Con đầu tiên luôn gấp 2 lần chiều rộng của con thứ hai. * Như một lời nhắc nhở thân thiện, 36 phục vụ cùng một mục đích như 30. Chúng tôi sẽ sử dụng 36 vì nó thông thường, nhưng chúng tôi sẽ nhận được kết quả chính xác như vậy nếu chúng tôi sử dụng 30 36 và 30 đặt kích thước giả định của phần tử. Thuật toán Flexbox có thể thu nhỏ các phần tử xuống dưới kích thước mong muốn này, nhưng theo mặc định, chúng sẽ luôn mở rộng cùng nhau, giữ nguyên tỷ lệ giữa cả hai phần tử Bây giờ, nếu chúng ta không muốn các yếu tố của mình thu nhỏ theo tỷ lệ thì sao? Hãy dành vài phút và chọc vào bản demo này. Xem nếu bạn có thể tìm ra những gì đang xảy ra ở đây. Chúng ta sẽ khám phá dưới đây flex-basis250pxflex-shrink1Giảm bởi. 0% flex-basis250pxflex-shrink1Giảm bởi. 0% trục chính trục chính flex-co lại. 1 Chiều rộng vùng chứa. 600 được rồi, vậy. chúng tôi có hai con, mỗi con có kích thước giả định là 250px. Vùng chứa cần phải rộng ít nhất 500px để chứa những phần tử con này ở kích thước giả định của chúng Giả sử chúng ta thu nhỏ vùng chứa thành 400px. Chà, chúng ta không thể nhét nội dung có giá trị 500px vào một cái túi 400px. Chúng tôi bị thâm hụt 100px. Các yếu tố của chúng tôi sẽ cần phải từ bỏ tổng số 100px để chúng phù hợp với Thuộc tính 35 cho phép chúng tôi quyết định cách thanh toán số dư đó Giống như 34, đó là một tỷ lệ. Theo mặc định, cả hai đứa trẻ đều có 425 và vì vậy mỗi đứa trẻ trả ½ số tiền còn lại. Mỗi người bị mất 50px, kích thước thực tế của họ giảm từ 250px xuống 200px Bây giờ, giả sử chúng ta điều khiển đứa con đầu tiên đó lên tới 426 Chúng tôi có tổng thâm hụt là 100px. Thông thường, mỗi đứa trẻ sẽ trả ½, nhưng vì chúng tôi đã mày mò với 35, phần tử đầu tiên sẽ trả ¾ (75px) và phần tử thứ hai trả ¼ (25px) Lưu ý rằng các giá trị tuyệt đối không quan trọng, tất cả là về tỷ lệ. Nếu cả hai đứa trẻ đều có 425, mỗi đứa trẻ sẽ trả ½ tổng số tiền thiếu hụt. Nếu cả hai đứa trẻ được quây lên đến 429, mỗi đứa trẻ sẽ trả 1000/2000 tổng số tiền thiếu hụt. Dù bằng cách nào, nó hoạt động giống nhauThu hẹp và tỷ lệ Trong ví dụ mà chúng ta đang xem xét, cả hai con Flex đều có cùng kích thước giả định (250px). Khi tìm ra cách thu nhỏ chúng, chúng ta có thể tính toán riêng bằng cách sử dụng 35 Tuy nhiên, như chúng ta đã thấy trước đó, thuật toán thu hẹp cũng sẽ cố gắng duy trì tỷ lệ giữa các anh chị em. Nếu con đầu tiên có kích thước gấp 2 lần con thứ hai, nó sẽ co lại mạnh hơn Vì vậy, phép tính đầy đủ liên quan đến việc xem xét 35 tương đối của từng đứa trẻ và kích thước tương đối của nó Tôi đã có một sự hiển linh một thời gian trước khoảng 35. chúng ta có thể coi nó là “nghịch đảo” của 34. Chúng là hai mặt của cùng một đồng xu
Điều này có nghĩa là chỉ một trong các thuộc tính này có thể hoạt động cùng một lúc. Nếu có thêm dung lượng, 35 không có tác dụng, vì các mục không cần phải thu nhỏ. Và nếu những đứa trẻ quá lớn so với thùng chứa của chúng, thì 34 sẽ không có hiệu lực, vì không có thêm không gian để phân chia Tôi thích coi đó là hai lĩnh vực riêng biệt. Bạn đang ở trên Trái đất hay ở Lộn ngược ? . Mỗi thế giới đều có quy tắc riêng. ngăn ngừa co rútĐôi khi, chúng tôi không muốn một số con Flex của chúng tôi bị thu nhỏ Tôi luôn nhận thấy điều này với các biểu tượng và hình dạng SVG. Hãy xem xét một ví dụ đơn giản Khi thùng chứa bị thu hẹp, hai vòng tròn của chúng tôi bị ép thành những hình bầu dục thô. Điều gì sẽ xảy ra nếu chúng ta muốn chúng giữ nguyên hình tròn? Chúng tôi có thể làm điều này bằng cách thiết lập 08 Khi chúng tôi đặt 35 thành 0, về cơ bản, chúng tôi “chọn không tham gia” quá trình thu hẹp hoàn toàn. Thuật toán Flexbox sẽ coi 36 (hoặc 30) là giới hạn tối thiểu cứng Đây là mã đầy đủ cho bản demo này, nếu bạn tò mò Bản trình diễn bóng Flex ShrinkĐịnh dạng mã bằng cách sử dụng Prettier đặt lại mã CSS HTML 1 Kết quả Làm mới khung kết quả Bật phím 'tab'Một cách tiếp cận đơn giản hơn?Vì vậy, tôi dạy khái niệm này trong khóa học của mình, và thỉnh thoảng, ai đó sẽ thắc mắc tại sao chúng ta lại gặp rắc rối khi sử dụng 35 khi có sẵn một cách tiếp cận đơn giản hơn
Một vài năm trước, tôi đã đồng ý. Nếu chúng tôi đặt chiều rộng tối thiểu, mục sẽ không thể thu nhỏ dưới điểm đó. Chúng tôi đang thêm một ràng buộc cứng, thay vì ràng buộc mềm của 30 / 36 Tôi nghĩ đây là một trong những tình huống dễ nhầm lẫn giữa “quen thuộc” với “đơn giản”. Bạn có thể cảm thấy thoải mái hơn nhiều với 15 so với 35, nhưng điều đó không có nghĩa là 35 phức tạp hơn Sau một vài năm thực hành, tôi thực sự cảm thấy như đặt 08 là giải pháp đơn giản/trực tiếp hơn cho vấn đề cụ thể này. Mặc dù vậy, 15 vẫn có một vai trò quan trọng trong thuật toán Flexbox. Chúng ta sẽ nói về điều đó tiếp theo Gotcha kích thước tối thiểuCó một điều nữa chúng ta cần nói ở đây, và nó cực kỳ quan trọng. Nó có thể là điều hữu ích nhất trong toàn bộ bài viết này Giả sử chúng ta đang xây dựng một biểu mẫu tìm kiếm linh hoạt cho một cửa hàng thương mại điện tử Khi vùng chứa co lại dưới một điểm nhất định, nội dung sẽ tràn ra ngoài Nhưng tại sao?? . Tại sao nó không chịu co lại? Đây là thỏa thuận. Ngoài kích thước giả định, còn có một kích thước quan trọng khác mà thuật toán Flexbox quan tâm. kích thước tối thiểu Thuật toán Flexbox từ chối thu nhỏ một đứa trẻ dưới kích thước tối thiểu của nó. Nội dung sẽ tràn ra thay vì thu nhỏ lại, cho dù chúng tôi có quay cao đến đâu 35 Nhập văn bản có kích thước tối thiểu mặc định là 170px-200px (nó khác nhau giữa các trình duyệt). Đó là hạn chế mà chúng ta đang gặp phải ở trên Trong các trường hợp khác, yếu tố giới hạn có thể là nội dung của phần tử. Ví dụ: thử thay đổi kích thước vùng chứa này Đối với phần tử chứa văn bản, chiều rộng tối thiểu là độ dài của chuỗi ký tự không thể ngắt dài nhất Đây là tin tốt. Chúng ta có thể xác định lại kích thước tối thiểu với thuộc tính 15 Bằng cách đặt 24 trực tiếp trên con Flex, chúng tôi yêu cầu thuật toán Flexbox ghi đè lên chiều rộng tối thiểu “tích hợp sẵn”. Vì chúng tôi đã đặt nó thành 0px nên phần tử có thể thu nhỏ lại nếu cần Thủ thuật tương tự này có thể hoạt động trong các cột Flex với thuộc tính 25 (mặc dù sự cố dường như không xuất hiện thường xuyên)Tiến hành thận trọng Điều đáng chú ý là kích thước tối thiểu tích hợp phục vụ mục đích. Nó hoạt động như một lan can bảo vệ, để ngăn chặn điều gì đó thậm chí còn tồi tệ hơn xảy ra Ví dụ. khi chúng tôi áp dụng 24 cho các con Flex chứa văn bản của chúng tôi, mọi thứ thậm chí còn tồi tệ hơn Sức mạnh lớn đi kèm với trách nhiệm lớn và 15 là một tài sản đặc biệt mạnh mẽ khi nói đến Flexbox. Nó đã nhiều lần giúp tôi thoát khỏi bế tắc, nhưng tôi luôn cẩn thận để đảm bảo rằng mình không làm mọi thứ trở nên tồi tệ hơn Khoảng trốngThuộc tính không được hỗ trợPhần này nói về tài sản 28. Rất tiếc, trình duyệt bạn đang sử dụng không hỗ trợ thuộc tính này. Do đó, các bản trình diễn trong phần này sẽ không hiển thị chính xác Một trong những cải tiến lớn nhất về chất lượng cuộc sống của Flexbox trong những năm gần đây là tài sản 28 trục chính trục chính hướng uốn cột hàng . 4px 28 cho phép chúng tôi tạo khoảng trống ở giữa mỗi con Flex, dọc theo trục chính. Điều này rất tốt cho những thứ như tiêu đề điều hướng Trang chủCửa hàngLiên hệ trục chính trục chính biện minh cho nội dung flex-startcenterflex-end . 16px 28 là một bổ sung tương đối mới cho ngôn ngữ Flexbox, nhưng nó đã được triển khai trên tất cả các trình duyệt hiện đại kể từ đầu năm 2021 Lề tự độngCó một mẹo khác liên quan đến khoảng cách mà tôi muốn chia sẻ. Nó đã xuất hiện từ những ngày đầu của Flexbox, nhưng nó tương đối ít người biết đến và tôi đã rất ngạc nhiên khi lần đầu tiên phát hiện ra nó Thuộc tính 32 được sử dụng để thêm khoảng trống xung quanh một phần tử cụ thể. Trong một số chế độ bố cục, như Dòng và Vị trí, nó thậm chí có thể được sử dụng để căn giữa một phần tử, với 33 Lề tự động thú vị hơn nhiều trong Flexbox trục chính trục chính lề trái 0 (mặc định)tự động lề phải 0 (mặc định)tự động Trước đó, chúng ta đã thấy cách thuộc tính 34 có thể ngấu nghiến bất kỳ không gian thừa nào, áp dụng nó cho một đứa trẻ Lề tự động sẽ ngấu nghiến khoảng trống thừa và áp dụng nó vào lề của phần tử. Nó cho phép chúng tôi kiểm soát chính xác nơi phân bổ không gian thừa Bố cục tiêu đề phổ biến có logo ở một bên và một số liên kết điều hướng ở bên kia. Đây là cách chúng ta có thể xây dựng bố cục này bằng cách sử dụng lề tự động sân chơi mật mãĐịnh dạng mã bằng cách sử dụng Prettier đặt lại mã CSS HTML 3 Kết quả Làm mới khung kết quả Bật phím 'tab'Logo Corpatech là mục danh sách đầu tiên trong danh sách. Bằng cách cung cấp cho nó 35, chúng tôi thu thập tất cả không gian thừa và buộc nó vào giữa mục thứ 1 và thứ 2 Chúng ta có thể thấy những gì đang diễn ra ở đây bằng devtools của trình duyệt Có rất nhiều cách khác mà chúng ta có thể giải quyết vấn đề này. chúng tôi có thể đã nhóm các liên kết điều hướng trong vùng chứa Flex của riêng chúng hoặc chúng tôi có thể phát triển mục danh sách đầu tiên với 34. Nhưng cá nhân tôi thích giải pháp ký quỹ tự động. Chúng tôi đang coi không gian thừa như một nguồn tài nguyên và quyết định chính xác nơi nó sẽ đến góiPhù. Chúng tôi đã bao gồm rất nhiều thứ cho đến nay. Chỉ còn một điều quan trọng nữa mà tôi muốn chia sẻ Cho đến nay, tất cả các mục của chúng tôi đã được đặt cạnh nhau, trong một hàng/cột. Thuộc tính 8 cho phép chúng tôi thay đổi điều đó Kiểm tra nó ra flex-cơ sở180px flex-cơ sở180px flex-cơ sở180px trục chính trục chính uốn dẻo nowrap (mặc định) bọc Chiều rộng vùng chứa. 600 Hầu hết khi chúng ta làm việc ở hai chiều, chúng ta sẽ muốn sử dụng CSS Grid, nhưng Flexbox + 8 chắc chắn có công dụng của nó. Ví dụ cụ thể này giới thiệu bố cục “bánh kếp được giải cấu trúc”, trong đó 3 mục xếp chồng lên nhau thành một kim tự tháp ngược trên màn hình cỡ trung bình Khi chúng tôi đặt 39, các mục sẽ không giảm xuống dưới kích thước giả định của chúng. Ít nhất, không phải khi gói vào hàng/cột tiếp theo là một tùy chọn Nhưng đợi đã. Còn phép ẩn dụ kebab / cocktail weenie của chúng ta thì sao?? Với 39, chúng tôi không còn có một đường trục chính duy nhất có thể xiên từng mục. Thực tế, mỗi hàng hoạt động như một thùng chứa linh hoạt nhỏ của riêng nó. Thay vì 1 xiên lớn, mỗi hàng lấy xiên riêng Tất cả các quy tắc mà chúng ta đã học cho đến nay vẫn tiếp tục được áp dụng, trong phạm vi giảm bớt này. Ví dụ, 3 sẽ phân phát hai mảnh trên mỗi thanh Nhưng hừm. Làm thế nào để 10 hoạt động, bây giờ chúng ta có nhiều hàng? Hãy dành một chút thời gian để xem xét. Bạn nghĩ điều gì sẽ xảy ra khi chúng ta thay đổi thuộc tính này? trục chính trục chính sắp xếp các mục flex-startcenterflex-endstretch Mỗi hàng là môi trường Flexbox nhỏ của riêng nó. 10 sẽ di chuyển từng mục lên hoặc xuống trong hộp vô hình bao quanh mỗi hàng Nhưng nếu chúng ta muốn tự căn chỉnh các hàng thì sao? trục chính trục chính sắp xếp các mục khởi động linh hoạt căn chỉnh nội dung khởi động linh hoạt Để tóm tắt những gì đang xảy ra ở đây
Bạn đã thực hiện nóVì vậy, tôi muốn thừa nhận một cái gì đó. đây là một hướng dẫn dày đặc. Chúng tôi đã đi xuống hố thỏ và trừ khi bạn đã là một chuyên gia Flexbox, tôi cho rằng đầu của bạn sẽ quay cuồng một chút. 😅 Giống như rất nhiều thứ trong CSS, Flexbox có vẻ đơn giản khi bạn mới bắt đầu, nhưng độ phức tạp sẽ tăng lên nhanh chóng khi bạn vượt qua những điều cơ bản Kết quả là, rất nhiều người trong chúng ta đã sớm đạt được trạng thái ổn định với CSS. Chúng tôi biết đủ để hoàn thành công việc, nhưng đó là một cuộc đấu tranh không ngừng. Ngôn ngữ cảm thấy ọp ẹp và không thể đoán trước, giống như một cây cầu dây cổ xưa có thể tắt bất cứ lúc nào. Khi nó xảy ra sự cố, chúng tôi ném các đoạn mã StackOverflow ngẫu nhiên vào sự cố, hy vọng điều gì đó sẽ giúp ích Nó không vui. Và điều đó thật tệ, vì CSS là một phần khá quan trọng trong hầu hết các công việc của nhà phát triển front-end Vấn đề là, CSS thực sự là một ngôn ngữ mạnh mẽ và nhất quán. Vấn đề là hầu hết các mô hình tư duy của chúng ta đều không đầy đủ và không chính xác. Khi chúng tôi dành thời gian để xây dựng một trực giác thích hợp cho ngôn ngữ, mọi thứ bắt đầu hoạt động và CSS trở thành một niềm vui tuyệt đối khi sử dụng. ✨ Năm ngoái, tôi đã phát hành một khóa học toàn diện có tên là CSS dành cho Nhà phát triển JavaScript  Khóa học là “đa phương thức”, có nghĩa là nó sử dụng nhiều hình thức truyền thông khác nhau. Tôi đã xây dựng nền tảng khóa học của riêng mình từ đầu để nó hỗ trợ
Nếu bạn thấy bài đăng trên blog này hữu ích, bạn sẽ thích khóa học này. Nó tuân theo cách tiếp cận tương tự, nhưng dành cho toàn bộ ngôn ngữ CSS, cùng với các bài tập và dự án để đảm bảo rằng bạn đang thực sự phát triển các kỹ năng mới Nó được xây dựng riêng cho những người sử dụng khung JS như React/Angular/Vue. 80% khóa học tập trung vào các nguyên tắc cơ bản của CSS, nhưng chúng ta cũng thấy cách tích hợp các nguyên tắc cơ bản đó vào một ứng dụng JS hiện đại, cách cấu trúc CSS của chúng ta, những thứ tương tự Nếu bạn gặp khó khăn với CSS, tôi hy vọng bạn sẽ kiểm tra nó. Có được sự tự tin với CSS đang thay đổi cuộc chơi, đặc biệt nếu bạn đã quen thuộc với HTML và JS. Khi bạn hoàn thành bộ ba thần thánh, việc duy trì dòng chảy trở nên dễ dàng hơn rất nhiều, để thực sự tận hưởng việc phát triển các ứng dụng web
Thưởng. Giải nén bản demoKhi bắt đầu hướng dẫn này, chúng ta đã thấy bản demo “4 bố cục với giá 1” sau đây Tên. E-mail. Nộp Chiều rộng vùng chứa. 600 Kéo tôi Bây giờ chúng ta đã tìm hiểu tất cả về thuật toán Flexbox, bạn có thể hiểu nó hoạt động như thế nào không? sân chơi mật mãĐịnh dạng mã bằng cách sử dụng Prettier đặt lại mã CSS HTML 4 Kết quả Làm mới khung kết quả Bật phím 'tab'Hãy xem qua cách thức hoạt động của nó Cảm ơn rất nhiều vì đã đọc. Bài đăng trên blog này là rất nhiều công việc và tôi rất vui mừng được đưa nó ra thế giới. Tôi hy vọng bạn tìm thấy nó hữu ích. 💖 Flexbox dùng để làm gì trong CSS?Bố cục CSS flexbox cho phép bạn dễ dàng định dạng HTML . Flexbox giúp đơn giản hóa việc căn chỉnh các mục theo chiều dọc và chiều ngang bằng cách sử dụng các hàng và cột. Các mặt hàng sẽ "uốn cong" thành các kích cỡ khác nhau để lấp đầy khoảng trống. Nó làm cho thiết kế đáp ứng dễ dàng hơn.
Flexbox là CSS hay HTML?Flexbox là mô-đun bố trí vùng chứa dựa trên CSS . Một trong những lợi ích lớn của Flexbox so với các bảng HTML là khả năng sử dụng bất kỳ phần tử HTML nào để xác định các vùng chứa và phần tử của nó. Bạn có thể sử dụng div , nav , article hoặc bất kỳ thẻ HTML ngữ nghĩa động hoặc tích hợp sẵn nào khác để xác định vùng chứa và các mục con của bạn.
Flexbox có tốt hơn lưới CSS không?Lưới là cách tốt nhất cho bố cục hai chiều với nhiều phần tử cần được định vị chính xác so với các phần tử khác. Flexbox phù hợp hơn với bố cục một chiều hoặc một dòng khi bạn chỉ cần sắp xếp một loạt các thành phần theo một cách nhất định .
Flexbox có tốt hơn Bootstrap không?Bởi vì sự thật là không có hệ thống nào tốt hơn – cả flexbox và Bootstrap đều tốt ở những thứ khác nhau và nên được sử dụng cùng nhau, không phải là lựa chọn thay thế cho nhau. Về cơ bản, Flexbox không phải là giải pháp thay thế cho Bootstrap . Trên thực tế, Bootstrap cũng sử dụng flexbox cho bố cục của nó trong Bootstrap 4. |
