Khởi động flex css
|
Flexbox được sinh ra được coi là cuộc cách mạng của CSS3, vì thế, nếu bạn học lập trình web thì không thể không giữ nó Show
 Hộp linh hoạt Bài viết này mình sẽ hướng dẫn đầy đủ về Flexbox, các khái niệm, thuật ngữ, các thuộc tính cũng như ví dụ về cách sử dụng flexbox lục mục 1. Giới thiệu về Flexbox 2. Khái niệm và thuật ngữ cơ bản của Flexbox 3. Các thuộc tính của flexbox 3. 1. Thuộc tính hiển thị 4. Ví dụ sử dụng flexbox Ví dụ 1. Căn giữa hoàn hảo với Flexbox
> Lưu ý. Trong bài viết này sẽ có các ví dụ được nhúng từ Codepen. io. Do đó, để xem được mã, bạn cần mở tab khác và vào trang Codepen. io (vượt captcha) và F5 lại bài viết này 1. Giới thiệu về FlexboxFlexbox Layout Module (Hộp linh hoạt) (Theo khuyến nghị của W3C kể từ tháng 10 năm 2017) Mục đích mục tiêu cung cấp một cách bố trí, sắp xếp và phân phối mục và không gian hiệu quả hơn trong một vùng chứa, ngay cả khi kích thước Ý tưởng chính đằng sau bố cục flex 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 mục để lấp đầy khoảng trống không có sẵn (chủ yếu là để phù hợp với tất cả các loại thiết bị hiển thị Một hộp chứa linh hoạt mở rộng các mục để lấp đầy khoảng trống không có sẵn hoặc thu nhỏ chúng để tránh bị tràn ra bên ngoài Quan trọng nhất, bố cục flexbox có hướng trái ngược với bố cục thông thường Mặc dù các bố cục thông thường vẫn hoạt động tốt cho các trang, 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, . v. ) Lưu ý. Bố cục Flexbox phù hợp nhất với các thành phần nhỏ của ứng dụng, trong khi bố trí GRID được dành cho tỷ lệ lớn hơn của bố cục cục bộ 2. Khái niệm và thuật ngữ cơ bản của FlexboxVì flexbox là một mô-đun, không phải là một thuộc tính duy nhất, nó liên quan đến rất nhiều thứ bao gồm cả một bộ thuộc tính của nó Một số trong số chúng được thiết lập trên thùng chứa (container) (phần tử cha, được gọi là 'flex container') trong khi những cái khác được đặt là phần tử con (nói là 'flex item') Nếu bố cục cục bộ 'thông thường' dựa trên cả hai hướng theo khối và hướng tuyến nội tuyến, thì bố cục cục bộ flex dựa trên 'hướng dòng chảy' (hướng dòng chảy linh hoạt) Và bạn có thể định hướng dòng chảy. If not rule, it is default Xem hình minh họa sau Các khái niệm, thuật ngữ cơ bản của Flexbox Các mục sẽ được bố trí theo trục chính (trục chính) (từ điểm bắt đầu chính đến điểm kết thúc chính) hoặc góc góc với trục chính - trục chéo (từ điểm bắt đầu chéo đến điểm kết thúc chéo)
Ngoài ra, bạn có thể nắm giữ các khái niệm cơ bản về Flexbox thông qua một trò chơi rất thú vị, đó chính là Flexbox Froggy. Cách chơi đơn giản là đặt những con ếch trên đúng lá sen Chơi thử Game Flexbox Froggy - Học Flexbox qua Game (Có phiên bản tiếng Việt) Ngoài ra còn có Game Flexbox Defense mang tính thử thách cực thú vị cho các bạn vừa chơi vừa rèn luyện Về cơ bản thì 90% trường hợp chúng ta cũng sẽ chỉ sử dụng những thuộc tính flexbox được học trong 2 game này Còn bài viết này thì như một tài liệu tham khảo về hầu hết thuộc tính của Flexbox > Ghi chú. Tất cả các kỹ thuật Front-end và Back-end sẽ được truyền đạt đầy đủ trong KHÓA HỌC PHP FULL STACK hoặc KHÓA HỌC JAVA FULL STACK. Tham gia ngay nếu bạn muốn học nhanh, đi thực tập, đi làm sớm 3. Các thuộc tính của flexboxChúng ta sẽ đi tìm hiểu về từng thuộc tính của Flexbox ngay sau đây Trước hết chúng ta sẽ tìm hiểu về các thuộc tính dành cho container Thuộc tính dành cho hộp chứa flexbox 3. 1. Thuộc tính hiển thịThuộc tính hiển thị được sử dụng để định nghĩa một thùng chứa linh hoạt. Nội tuyến (inline) hoặc khối (block) tùy thuộc vào định giá cao nhất Nó cho phép tạo ra một flex context để tiếp tục sắp xếp các flex item Lưu ý rằng các cột CSS không có tác dụng đối với flex container 3. 2. Thuộc tính flex-directionThuộc tính flex-direction thiết lập trục chính (main-axis), do đó xác định hướng các mục flex sẽ được đặt trong flex container Thuộc tính flex-direction Flexbox là một khái niệm định hướng cục bộ. Hãy hiểu rằng các mục flex sẽ chỉ được đặt theo các hàng ngang hoặc cột dọc hướng uốn. hàng ngang. đảo ngược hàng. cột. đảo ngược cột; in which
3. 3. Thuộc tính flex-wrapTheo mặc định, tất cả các mục linh hoạt sẽ cố gắng khớp với một dòng. Bạn có thể thay đổi điều đó và cho phép các mục xuống hàng (tách hàng) khi cần thiết với thuộc tính flex-wrap này Thuộc tính flex-wrap uốn dẻo. bây giờ. bọc. quấn ngược; in which
Như trong ví dụ bên dưới đây
Chú thích. flex-direction is setting default value. hàng ngang Xem hộp uốn cong của bút. Demo thuộc tính flex-wrap của NIIT -ICT Hà Nội (@niiticthanoi) trên CodePen
3. 4. Thuộc tính flex-flowThuộc tính flex-flow là một cách viết tắt cho các thuộc tính flex-direction và flex-wrap Nó cùng xác định main axis and cross axis of flex container. default value is row nowrap dòng chảy linh hoạt. hướng uốn; hoặc 3. 5. Thuộc tính justify-contentThuộc tính justify-content verify the vertical connection by main Nó giúp điều chỉnh phần không gian trống còn lại khi tất cả các mục linh hoạt cùng được đặt trên một dòng Thuộc tính justify-content Nó cũng thực hiện một số kiểm soát đối với các liên kết của các mục khi chúng tràn qua dòng không gian xung quanh. không gian đều in which
Lưu ý rằng các trình duyệt khác nhau sẽ hỗ trợ nhau Ví dụ, space-between không bao giờ được hỗ trợ từ một phiên bản của Edge và An toàn nhất là các giá trị. flex-start, flex-end và center Ngoài ra còn có hai từ khóa bổ sung mà bạn có thể ghép nối với các giá trị này. an toàn và không an toàn 3. 6. Thuộc tính align-itemThuộc tính align-items xác định hành vi mặc định cho cách các mục flex được đặt dọc theo trục chéo trên dòng hiện tại Hãy hiểu nó như là phiên bản justify-content nhưng dành cho trục chéo (vuông góc với trục chính)
Các từ khóa an toàn và không an toàn có thể được sử dụng tương tự với tất cả các từ khóa còn lại (mặc dù có một số trình duyệt cần lưu ý) 3. 7. Thuộc tính align-contentNếu như thuộc tính justify-content phân phối khoảng trống giữa các mục trên trục chính thì Thuộc tính align-content Thuộc tính align-content phân phối khoảng trống giữa các hàng, hàng với cạnh container (theo trục chéo) khởi động linh hoạt. kết thúc uốn cong. trung tâm không gian giữa. không gian xung quanh. không gian đều đường cơ sở. đường cơ sở đầu tiên. đường cơ sở cuối cùng in which
Tiếp theo chúng ta sẽ tìm hiểu về cách thuộc tính dành cho flex item Các thuộc tính dành cho mục linh hoạt 3. 8. Thuộc tính thứ tựThuộc tính thứ tự Theo mặc định, các mục linh hoạt được đặt theo thứ tự sắp xếp trong HTML. Tuy nhiên, thuộc tính đơn đặt hàng có thể kiểm tra thứ tự xuất hiện của chúng trong thùng chứa linh hoạt 3. 9. Thuộc tính flex-growThuộc tính flex-grow Thuộc tính flex-grow phân phối bổ sung khoảng không gian cho các mục nếu cần thiết Nó chấp nhận một giá trị đơn vị như một tỷ lệ. Nó chỉ ra lượng không gian có sẵn bên trong flex container mà item sẽ chiếm Nếu tất cả các mục có flex-grow được đặt thành 1, thì các mục sẽ chiếm mỗi mục 1 phần của vùng chứa Nếu một trong những mặt hàng có giá trị là 2, thì mặt hàng này sẽ được chia thành 2 phần và các mặt hàng khác sẽ được chia cho mỗi 1 mặt hàng một phần của thùng chứa Number of sound is invalid 3. 10. Thuộc tính flex-shrinkThuộc tính flex-shrink sử dụng để co lại mục nếu cần thiết
Number of sound is invalid 3. 11. Thuộc tính linh hoạtThuộc tính flex-basis xác định kích thước mặc định của một phần tử trước khi không còn thời gian phân phối lại It could be long length (ví dụ. 20%, 5rem, v. v. ) hoặc một từ khóa
cơ sở linh hoạt. . tự động; Nếu thiết lập đến 0, thêm không gian xung quanh nội dung không phải là phần tử. If setting to auto, more not time is being partition based on flex-grow. Xem này, đồ họa 3. 12. Thuộc tính linh hoạtThuộc tính flex được viết tắt để kết hợp các thuộc tính flex-grow, flex-shrink và flex-basis Tham số thứ 2 và thứ 3 (flex-shrink và flex-basis) là tùy chọn. Default is 0 1 auto flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'>] Bạn nên sử dụng các thuộc tính tốc ký này vì phải thiết lập các thuộc tính riêng lẻ. Ký hiệu tốc độ giúp thiết lập các giá trị khác một cách thông minh hơn 3. 13. Thuộc tính align-selfThuộc tính align-self Thuộc tính align-self tương tự như align-item nhưng chỉ định cho một mục riêng Vui lòng xem giải thích align-items để hiểu được giá trị của nó * Lưu ý rằng float, clear và vertical-align không ảnh hưởng đến một mục flex 4. Ví dụ sử dụng flexboxVí dụ 1. Căn giữa hoàn hảo với FlexboxHãy bắt đầu với một ví dụ rất đơn giản, giải quyết gần như hàng ngày chủ đề. Căn giữa hoàn hảo Không có cách nào đơn giản hơn là sử dụng flexbox CSS /* Thiết lập bối cảnh flex */ /* Hoặc kích thước khác */ /* Hoặc kích thước khác */ /* Hoặc kích thước khác */ Ví dụ Codepen Xem hộp uốn cong của bút. Căn giữa hoàn hảo bởi NIIT -ICT Hà Nội (@niiticthanoi) trên CodePen Ví dụ về căn giữa hoàn hảo với flexbox Ví dụ 2. Responsive với flexboxBây giờ hãy sử dụng một số thuộc tính khác. Hãy xem xét một danh sách bao gồm 6 mục, tất cả đều có kích thước xác định, nhưng có thể có kích thước tự động CSS /* Đầu tiên, tạo ra bối cảnh flex */ /* Sau đó xác định hướng dòng chảy flex-direction Please nhớ rằng đây là tương tự /* Sau đó chúng ta phân phối không gian còn lại cho đều nhau */ biện minh cho nội dung. không gian xung quanh; Chúng ta muốn chúng được phân bổ đều trên trục ngang để khi chúng ta thay đổi kích thước trình duyệt, mọi thứ đều có tỷ lệ độc lập mà không cần @media ví dụ codepen
Xem hộp uốn cong của bút. Responsive with Flexbox by NIIT -ICT Hà Nội (@niiticthanoi) trên CodePen
Ví dụ 2. Responsive menu với flexboxHãy tưởng tượng chúng ta có một menu căn bản phải ở trên cùng trang web của chúng ta Nhưng chúng tôi muốn nó được căn cứ vào giữa nếu màn hình trung bình và xếp hạng thành cột đơn trên các thiết bị nhỏ. Too easy with flexbox CSS /* Căn chỉnh mục về cuối theo trục chính */ biện minh cho nội dung. kết thúc uốn cong; /* Màn hình trung bình */ @media tất cả và (độ rộng tối đa. 800px) { /* vào Căn chỉnh mục tập trung lưu theo kiểu xung quanh */ biện minh cho nội dung. không gian xung quanh; @media tất cả và (độ rộng tối đa. 500px) { /* Mỗi một mục nằm trên một hàng (sắp xếp thành 1 cột duy nhất) */ Xem kết quả trong ví dụ codepen sau Xem hộp uốn cong của bút. Responsive menu với Flexbox by NIIT -ICT Hà Nội (@niiticthanoi) trên CodePen Ví dụ responsive menu với flexbox Ví dụ 3. Trang web đáp ứng đơn giản với flexboxMục đích cuối cùng của việc sử dụng flexbox là hỗ trợ tốt cho thiết kế website responsive. Vì vậy, bây giờ hãy thử thiết kế một trang web cục bộ đáp ứng đơn giản với flexbox nhé CSS /* Những ta dựa vào thứ tự nguồn cho phương pháp mobile-first /* Màn hình trung bình */ @media tất cả và (độ rộng tối thiểu. 600px) { /* Thanh bên nằm trên cùng một hàng */ @media tất cả và (độ rộng tối thiểu. 800px) { /* Những ta đảo ngược thứ tự của thanh bên đầu tiên và chính * và nói rằng chính có chiều rộng gấp đôi thanh bên Please view in ví dụ codepen bên dưới Xem hộp uốn cong của bút. Ví dụ responsive website đơn giản của NIIT -ICT Hà Nội (@niiticthanoi) trên CodePen
Tổng kết FlexboxNhư vậy là qua bài viết này, bạn đã hiểu rõ hơn về Flexbox, các khái niệm quan trọng cũng như các thuộc tính của flexbox Hơn nữa, chúng ta còn thử nghiệm với 4 ví dụ đơn giản về ứng dụng của flexbox Nắm kỹ năng sử dụng flexbox thì mức thiết kế web cũng như lập trình web của bạn sẽ nâng cao hơn rất nhiều, dễ thở hơn > Tham khảo. Học FRONT END chuyên nghiệp với React Chúc bạn học lập trình vui vẻ --- HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI Học lập trình chất lượng cao (Từ năm 2002). Học thực tế + Tuyển dụng ngay Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội SĐT. 02435574074 - 0383. 180086 E-mail. xin chào@niithanoi. giáo dục. vn trang chủ. https. //Facebook. com/NIIT. CNTT-TT/ #niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #python #java #php |
