Một CSS Flexbox Cheatsheet

Flexbox là một cách tốt để có được sự linh hoạt hơn trong bố cục của bạn và đơn giản hóa thiết kế bố cục đáp ứng. Nó giúp dễ dàng căn chỉnh các phần tử trên mặt phẳng 2D và khá dễ sử dụng khi bạn đã quen với các thuộc tính chính.

---

Bước đầu tiên là đặt display: flex trên một phần tử containers . Những đứa trẻ để hộp đựng linh hoạt trở thành vật phẩm linh hoạt. Một tập hợp các thuộc tính có thể được áp dụng cho các containers linh hoạt và có ảnh hưởng đến tất cả các mục nói chung và một tập hợp các thuộc tính khác có thể được áp dụng cho các mục linh hoạt và ảnh hưởng của chúng đến các mục được nhắm đến . Đến lượt nó, các mục linh hoạt cũng có thể là các container linh hoạt cho các phần tử mà nó chứa, giúp dễ dàng tạo các bố cục phức tạp.

Hỗ trợ trình duyệt: Dữ liệu năm 2020 cho thấy 98% trình duyệt trên toàn thế giới hiện hỗ trợ flexbox mà không cần tiền tố của nhà cung cấp.

Sau đây là một cách nhanh chóng để giúp bạn hiểu rõ về Flexbox trong nháy mắt. Đây không phải là một danh sách đầy đủ tất cả các thuộc tính, giá trị và các trường hợp cạnh có sẵn, mà là một bản tóm tắt nhanh các thuộc tính hữu ích nhất hoặc thường được sử dụng.

Thuộc tính containers linh hoạt

Đây là một containers có 3 mục flex khoảng , không có Flexbox:

<div class="box">   <span class="item">     <img src="/images/dino.svg" width="64" height="45" alt="Dino Sammy">   </span>   <span class="item">     <img src="/images/steampunk.svg" width="64" height="45" alt="Steampunk Sammy">   </span>   <span class="item">     <img src="/images/skeleton.svg" width="64" height="45" alt="Skeleton Sammy">   </span> </div> 

hiển thị: flex

Bây giờ, hãy cải thiện nó một cách tự động đơn giản bằng cách cài đặt display: flex trên container. Lưu ý cách các mục hiện tự động mở rộng đến không gian có sẵn trong containers :

.container {   display: flex; } 

hướng uốn

Bạn có thể thay đổi hướng của các mục bằng thuộc tính flex-direction :

.container {   display: flex;   flex-direction: column; } 

Giá trị mặc định là hàng và các giá trị có sẵn bổ sung là đảo ngược hàng , cột , đảo ngược cột .

đảo ngược hàng và đảo ngược cột thay đổi thứ tự trực quan của các mục mà không cần phải thay đổi thứ tự của đánh dấu HTML:

.container {   display: flex;   flex-direction: column-reverse; } 

Khả năng thay đổi giữa hướng hàng và cột giúp bạn dễ dàng điều chỉnh bố cục trên các thiết bị nhỏ hơn chỉ với một lần thay đổi luật CSS trong media query .

biện minh cho nội dung

Sử dụng justify-content để căn chỉnh các mục trên trục chính. Trục chính là trục Y khi hướng uốn là cột và trục X khi hướng uốn là hàng .

Giá trị mặc định là flex-start và các giá trị có sẵn bổ sung là flex-end , center , space-between , space-around và space-đều .

căn chỉnh các mục

align-items tương tự như justify-content , nhưng cho phép căn chỉnh các mục theo trục chéo. Nó mặc định là kéo giãn và cũng chấp nhận flex-start , flex-end , center và baseline :

căn chỉnh nội dung

align-content tương tự như align-items , nhưng nó chỉ có tác dụng khi có nhiều hơn một dòng item flex (xem flex-wrap bên dưới). Nó mặc định là giãn và cũng chấp nhận flex-start , flex-end , center , space-between , space-đều :

bọc uốn

Theo mặc định, các mục sẽ không bao bọc (mặc định của nowrap ), vì vậy nếu các mục chiếm nhiều dung lượng hơn những gì có sẵn, chúng sẽ tràn.Điều này có thể được khắc phục với flex-wrap được đặt thành giá trị của wrap :

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

tự căn chỉnh

align-self cũng giống như align-items , nhưng chỉ dành cho các mục cụ thể. Điều này giúp bạn dễ dàng có các mặt hàng linh hoạt vượt ra khỏi luật chính:

uốn cong

Với flex-grow, ta có thể kiểm soát lượng không gian mà một mục flex chiếm so với các mục khác. flex-grow chấp nhận một giá trị số và nó đại diện cho một phần nhỏ của không gian có sẵn, tùy thuộc vào giá trị flex-grow của các mục khác. Nó được mặc định là giá trị 0, nghĩa là mục đó sẽ không chiếm không gian trống có sẵn.

Vì nó dựa trên tỷ lệ, nên việc đặt tất cả các mục thành, ví dụ: tăng trưởng linh hoạt là 200 cũng giống như đặt tất cả các mục thành tăng trưởng linh hoạt là 1.

Trong ví dụ dưới đây, mục đầu tiên có giá trị flex-grow mặc định là 0, mục thứ hai có giá trị là 1 và mục thứ ba có giá trị là 2:

uốn cong

flex-co lại trái ngược với flex-grow và xác định khả năng co lại của các mặt hàng. Giá trị này được mặc định là 1, nghĩa là các mục có thể thu nhỏ lại và cũng giống như với flex-grow, nó dựa trên tỷ lệ với các mục khác.

cơ sở linh hoạt

flex-base xác định không gian bắt đầu mà một mục chiếm, nhưng nó không phải là sự đảm bảo vì nó còn phụ thuộc vào tình trạng còn trống hoặc nếu có thêm không gian để lấp đầy.

Để minh họa, trong ví dụ sau, tất cả các mục đều có cơ sở linh hoạt là 25% :

… Nhưng bây giờ ta cũng hãy cho phép flex-grow 1 cho item flex đầu tiên. Trong ví dụ sau, tất cả các mục đều có cơ sở linh hoạt là 25% , nhưng mục đầu tiên chiếm phần còn lại của không gian khả dụng vì nó có giá trị tăng trưởng linh hoạt là 1:

… Và cuối cùng, ở đây mục thứ ba của ta có cơ sở uốn là 77% và từ chối thu nhỏ để tạo không gian cho các mục khác có cơ sở uốn là 25% vì nó có giá trị uốn là 0:

.item {   flex-basis: 25%; } .item:last-child {   flex-basis: 77%;   flex-shrink: 0; } 

uốn dẻo

flex là một thuộc tính ngắn gọn cho sự kết hợp của flex-grow , flex-co và flex-base . Ví dụ: đây là cú pháp cho một mục có giá trị flex-grow là 2, giá trị flex-co là 0 và flex-base là 2rem:

.item {   flex: 2 0 2rem; } 

---

---

Các tin liên quan

Tạo kiểu cho thanh cuộn bằng CSS: Cách hiện đại để tạo kiểu cho thanh cuộn
2020-09-02
Tạo các phần tử dính trong CSS Vị trí sử dụng: dính
2020-09-02
Đầu vào biểu mẫu tạo kiểu trong CSS Với: bắt buộc,: tùy chọn,: hợp lệ và: không hợp lệ
2020-09-02
Tạo mặt nạ image trong CSS bằng thuộc tính mask-image
2020-09-02
rem vs em Unit trong CSS
2020-09-02
Hướng dẫn thực hành để sử dụng CSS Vị trí tương đối & tuyệt đối
2020-09-02
Một CSS Flexbox Cheatsheet
2020-09-02
Tham khảo: Tên màu CSS
2020-09-02
Thuộc tính z-index CSS Mighty
2020-09-01
CSS: focus-trong Pseudo-Class
2020-09-01