Hướng dẫn trực quan về CSS Flexbox

CSS Flexbox là gì?

Theo tài liệu web MDN:

“Bố cục hộp linh hoạt CSS là một mô-đun của CSS xác định mô hình hộp CSS được tối ưu hóa cho thiết kế giao diện người dùng và bố cục của các mục trong một chiều. Trong mô hình bố cục linh hoạt, phần con của thùng chứa linh hoạt có thể được bố trí theo bất kỳ hướng nào và có thể "uốn" kích thước của chúng, tăng lên để lấp đầy không gian chưa sử dụng hoặc thu nhỏ để tránh tràn phần phụ. Các em có thể thao tác dễ dàng cả căn chỉnh ngang và dọc ”.

Vì vậy, tóm lại, nó là một mô-đun bố cục giúp mọi thứ dễ dàng hơn trong việc căn chỉnh và phân bổ không gian giữa các mục trong một thùng chứa.

Hãy xem nhanh một vài ví dụ về những gì có thể được thực hiện chỉ với tối thiểu 1–2 dòng mã sử dụng CSS flexbox:

Bố cục căn chỉnh theo chiều ngang:

Bố cục căn chỉnh theo chiều dọc:

Thật tuyệt vời khi chỉ cần một hoặc hai dòng CSS để thao tác bố cục bên trong mỗi vùng chứa.

Những thứ cơ bản

Thuộc tính Flexbox có thể được phân loại thành 2 loại chính:

  1. Thuộc tính vùng chứa (flex-direction, flex-wrap, justify-content, align-items, align-content)
  2. Thuộc tính Flex Item (đặt hàng, uốn dẻo , uốn cong, uốn cong, thu nhỏ, căn chỉnh)

Hiển thị: flex

Thuộc tính đầu tiên không dành riêng cho flexbox. Tài sản đó là displaymà chúng tôi thiết lập với giá trị: flex. Điều này được đặt trên vùng chứa chứa các mục chúng ta muốn thao tác.

Hãy thêm một số hình ảnh để hiểu cách nó hoạt động:

Nếu ban đầu chúng ta có một thùng chứa, với 3 ô ( div) bên trong nó. Đây là cách chúng sẽ trông như thế nào:

Bây giờ hãy thêm flexvào vùng chứa:

Chỉ một dòng CSS đã thay đổi bố cục từ chiều dọc sang chiều ngang.

Các thuật ngữ quan trọng xung quanh Flexbox

Những thuật ngữ này sẽ được sử dụng trong suốt hướng dẫn này.

  1. Vùng chứa linh hoạt: Điều này đề cập đến vùng chứa đã display: flex;được đặt thành nó.
  2. Mục Flex: Đây là những con riêng lẻ bên trong Thùng chứa Flex
  3. Trục chính : Theo mặc định được đặt từ trái sang phải.
  4. Trục chéo : Theo mặc định được đặt từ trên xuống dưới.

Ngay sau khi display: flexđược đặt trên một thùng chứa, các trục tưởng tượng này sẽ hoạt động cùng nhau để xác định các mục linh hoạt bên trong thùng chứa linh hoạt sẽ di chuyển và hoạt động như thế nào. Hai trục này thay đổi hướng, bất cứ khi nào chúng ta thay đổi các thuộc tính flexbox nhất định được thảo luận bên dưới.

Hướng linh hoạt

Thuộc tính này xác định hướng của các trục tưởng tượng. Đến lượt mình, các trục xác định cách đặt các mục trong thùng linh hoạt. Nó có 4 giá trị sau:

  1. rowlà giá trị mặc định của trục chính hướng từ trái sang phải. Trục chéo vẫn từ trên xuống dưới.
  2. row-reverseđảo ngược hướng của hàng từ phải sang trái. Một lần nữa, trục chéo không bị ảnh hưởng.

3. columnthay đổi trục chính từ trục hoành sang trục tung. Có nghĩa là trục chính hiện đang chảy từ trên xuống dưới trong khi trục chéo hiện đang chảy từ trái sang phải.

4. column-reversetương tự như giá trị cột với sự khác biệt duy nhất là trục chính hiện chảy từ dưới lên trên.

Bọc linh hoạt

Theo mặc định, vùng chứa linh hoạt không cho phép các mục chiếm nhiều dòng liên tiếp. Thay vào đó, tất cả các mục sẽ được thu nhỏ để vừa với một hàng, tức là nó không cho phép gói thành nhiều dòng.

  1. flex-wrap: no-wrap là mặc định.

2 flex-wrap: wrap.. Bằng cách thay đổi thuộc tính đó thành wrap, bây giờ chúng tôi có thể đảm bảo rằng mỗi mục linh hoạt sẽ giữ kích thước tương ứng của chúng. Nếu chúng không thể vừa trên một dòng, chúng sẽ quấn thành một hàng hoặc cột tiếp theo tùy thuộc vào hướng uốn.

Nếu hướng uốn đã được đặt thành đảo ngược hàng, thì các mục sẽ chuyển sang hàng tiếp theo bắt đầu từ bên phải sang bên trái.

3. wrap-reversemặt khác sẽ quấn hàng linh hoạt tiếp theo phía trên hàng đầu tiên, vẫn từ trái sang phải.

Căn đều-nội dung

Thuộc tính này được sử dụng rất thường xuyên. Mục đích của nó là phân phối không gian giữa các mục linh hoạt trong một thùng chứa linh hoạt dọc theo trục chính . Giá trị mặc định của nó được đặt thành flex-start.

Hãy nhớ: Nếu hướng uốn đã được đặt thành cột, thì trục chính bây giờ sẽ di chuyển từ trên xuống dưới. Có nghĩa là giờ đây justify-content sẽ phân phối các mục theo chiều dọc.

Căn chỉnh các mặt hàng

Thuộc tính này cũng phổ biến justify-contentvà được sử dụng thường xuyên với flexbox. Nó hoạt động tương tự như justify-contentvới sự khác biệt duy nhất là nó hoạt động dọc theo trục chéo . Giá trị mặc định cho align-itemsstretch.

Hãy nhớ rằng: Nếu hướng uốn đã được đặt thành cột, thì trục chéo bây giờ sẽ chảy từ trái sang phải. Có nghĩa là căn chỉnh các mục bây giờ sẽ phân phối các mục theo chiều ngang.

Căn chỉnh nội dung

Thuộc tính này tương tự và có thể dễ bị nhầm lẫn với align-items. Mục đích của thuộc tính này là xác định cách phân phối không gian giữa các hàng trong một vùng chứa linh hoạt dọc theo trục chéo .

Trong khi align-itemsnhắm mục tiêu không gian giữa các mục linh hoạt, align-contentnhắm mục tiêu các hàng giữa các mục. Giá trị mặc định cho align-contentstretch.

Thuộc tính mục linh hoạt

Đã đến lúc chuyển sang loại thuộc tính flexbox thứ hai, cho phép chúng tôi nhắm mục tiêu các mục riêng lẻ bên trong container flex.

Căn chỉnh bản thân

Thuộc tính này cho phép bạn căn chỉnh một mục linh hoạt riêng lẻ dọc theo trục chéo. Nó ghi đè bộ căn chỉnh cho vùng chứa thông qua align-items.

Nó cũng có các thuộc tính tương tự như align-items(xem ở trên).

Đặt hàng

Thuộc tính này cho phép chúng tôi sắp xếp lại vị trí của từng mục linh hoạt bên trong thùng chứa linh hoạt của chúng. Theo mặc định, tất cả các mục đều có giá trị 0 được gán cho chúng.

Bằng cách chỉ định giá trị thấp hơn (-ve) hoặc lớn hơn (+ ve) ordercho từng mục, mục cụ thể đó sẽ di chuyển để được định vị theo giá trị của chúng.

Thứ tự sẽ tuân theo quy ước hợp lý nhất, đó là -ve, 0, + ve. Số thấp nhất sẽ ở ngoài cùng bên trái và số lớn nhất ở ngoài cùng bên phải, giả sử rằng mọi thứ khác được đặt làm mặc định. Nếu có các mục chưa được gán bất kỳ giá trị mới nào, chúng vẫn là 0.

Lưu ý: Các hộp 1, 2, 5 và 6 trong ví dụ trên vẫn ở giá trị mặc định là 0. Để làm rõ, sáu hộp ở trên có các giá trị sau: -1, 0, 0, 0, 0, 1 .

Nếu bạn muốn đặt một hộp phía trước hộp số 4, thì bạn cần đặt hộp được nhắm mục tiêu của mình theo thứ tự -2 hoặc thấp hơn.

Flex-base, Flex-Grow và Flex-Shrink

Cho đến nay, tất cả các vật phẩm linh hoạt đều có kích thước bằng nhau. Bây giờ chúng ta hãy xem cách chúng ta có thể làm cho một mặt hàng linh hoạt cụ thể chiếm nhiều không gian hơn bên trong thùng chứa linh hoạt so với các mục khác bên trong cùng một thùng chứa.

Cơ sở linh hoạt

Thuộc tính này chỉ định kích thước lý tưởng của một mặt hàng flex trước khi nó được đặt vào một container flex. Nó hoạt động tương tự như chiều rộng khi làm việc với các hàng. Nó hoạt động giống như chiều cao khi làm việc với các cột. Vì vậy, nếu chúng ta đang làm việc với các cột và một mục đã được cung cấp cả chiều cao và cơ sở linh hoạt, thì cơ sở linh hoạt sẽ được ưu tiên vì nó là chiều cao lý tưởng mà một mục linh hoạt sẽ lấy nếu có đủ không gian.

Điều đó đang được nói, nếu không có đủ không gian và không có chiều cao hoặc chiều rộng được chỉ định cho các mục. Các mục sẽ có chiều cao tối đa hoặc chiều rộng tối đa có sẵn trong vùng chứa.

Flex-Grow

Thuộc tính này xác định cách các mục linh hoạt có thể phát triển để lấp đầy khoảng trống chưa sử dụng trong thùng chứa linh hoạt.

Nếu chúng ta gán a flex-grow: 1cho tất cả các hộp, tất cả chúng sẽ lấy đều không gian còn lại, đây cũng là giá trị mặc định của nó. Số có thể là bất cứ thứ gì, miễn là tất cả chúng đều là cùng một số.

Nếu chúng ta cho flex-grow: 1một mặt hàng và cho một mặt hàng thứ hai a flex-grow: 2, thì mặt hàng thứ hai sẽ chiếm số lượng không gian chưa sử dụng nhiều gấp hai lần so với mặt hàng đầu tiên.

Điều này áp dụng cho cả hàng và cột.

Co lại

Thuộc tính này xác định cách flex-mục có thể co lại bất cứ khi nào có không đủ không gian trong một flex-container.

Các flex-shrink: 1là giá trị mặc định, có nghĩa là tất cả các mục sẽ giảm ở mức tương tự theo mặc định.

Lưu ý:flex-shrink: 0; có nghĩa là mặt hàng cụ thể này không bao giờ được co lại.

flex-shrink: 2; có nghĩa là mặt hàng cụ thể này sẽ co lại nhanh hơn các mặt hàng khác tại flex-shrink: 1;

Flex

Đây là phiên bản viết tắt cho flex-grow, flex-co và flex-base theo thứ tự cụ thể đó.

Nếu bạn cần sử dụng cả ba cách trên, bạn có thể chỉ cần sử dụng một cái gì đó như sau:

flex: 0 2 200px; trong đó 0 đề cập đến tăng trưởng uốn, 2 đề cập đến uốn co lại và 200px đề cập đến cơ sở uốn tương ứng.

Xin chúc mừng!

Đó là nó! Đây là những thành phần quan trọng để trở thành bậc thầy uốn dẻo. Và giống như mọi thứ khác trong cuộc sống và trong mã, thực hành làm cho hoàn hảo. Tôi thực sự khuyên bạn nên đưa hướng dẫn này vào thực tế để có được sự hiểu biết thực tế. Một ví dụ có thể là bắt đầu với một cái gì đó nhỏ như một thanh điều hướng đơn giản.

Bạn cũng có thể xem liên kết đến bộ sưu tập Codepen của tôi trên flex-box mà tôi đã sử dụng để tạo các flexbox đó trong hình trên và chỉnh sửa chúng để xem chúng thay đổi như thế nào.

Cảm ơn bạn đã đọc hướng dẫn này trên flexbox. Tôi hy vọng rằng nó hữu ích và nhiều thông tin. Nếu bạn có bất kỳ câu hỏi nào hoặc muốn chia sẻ suy nghĩ của mình về chủ đề này, vui lòng liên hệ qua phần bình luận hoặc qua email tại [email protected]

Nếu bạn thấy bài đọc này có giá trị, vui lòng thể hiện tình yêu của bài viết này, bằng cách để lại một số vỗ tay, để các nhà phát triển khác cũng có thể tìm thấy nó.

ZeeshaanMaudar - Tổng quan

Mã cho niềm vui Mã để thay đổi Mã cho lợi ích xã hội - ZeeshaanMaudar github.com