Cách sử dụng Flex để làm cho trang web của bạn trở nên thích ứng hơn
Các thiết kế trang web hiện đại cần phải đáp ứng với những thay đổi về nội dung hoặc kích thước trình duyệt. Bạn có thể đạt được điều này bằng cách sử dụng CSS vani, truy vấn phương tiện hoặc flexbox.
Một số thuộc tính flex nhất định như flex-wrap hoặc flex-grow có thể thay đổi kích thước hoặc vị trí của một phần tử theo cách trực quan hấp dẫn. Bài viết này sẽ đi qua các ví dụ về cách bạn có thể sử dụng các thuộc tính flex-grow, flex-co, flex-wrap, flex-flow và order flex.
Mục Lục
Cách thiết lập CSS Flex Display
Nếu bạn chưa quen với những kiến thức cơ bản về flexbox, bạn có thể khám phá đoạn mã CodePen này. Nó bao gồm mã ví dụ cho một thiết lập flexbox đơn giản. Đầu tiên, bạn sẽ cần bọc các mục con dưới div cha hoặc “flex container”.
<div class="parent">
<div class="child-item"></div>
<div class="child-item"></div>
<div class="child-item"></div>
</div>Thêm hiển thị: flex thuộc tính của div cha.
.parent {
display: flex;
}Làm thế nào để phát triển các mặt hàng trong một thùng chứa
Các uốn cong thuộc tính cho phép các mục con mở rộng để lấp đầy không gian có sẵn trong div mẹ của nó. Thuộc tính này cho phép bạn chỉ định lượng không gian “tỷ lệ” mà mỗi mục hộp có thể chiếm.
Để thêm flex-grow, hãy thêm thuộc tính flex-grow CSS vào từng mục con.
<div class="parent">
<div style="background-color: red; flex-grow: 1"></div>
<div style="background-color: orange; flex-grow: 1"></div>
<div style="background-color: yellow; flex-grow: 1"></div>
<div style="background-color: green; flex-grow: 3"></div>
<div style="background-color: blue; flex-grow: 1"></div>
</div>
.parent {
width: 500px;
display: flex;
}
Sự tăng trưởng linh hoạt của 0 cho mỗi mục có nghĩa là các hộp sẽ không mở rộng để lấp đầy không gian của mục mẹ của chúng. 0 là giá trị mặc định cho thuộc tính này.
Sự tăng trưởng linh hoạt của 1 cho mỗi mục sẽ buộc tất cả các hộp mở rộng như nhau để vừa với không gian có sẵn bên trong hộp chính.
Nếu một trong các mặt hàng có độ uốn lớn hơn, ví dụ:
<div style="background-color: green; flex-grow: 3"></div>
Hộp màu xanh lá cây sẽ cố gắng đạt được lượng không gian gấp ba lần so với các hộp khác.
Xem mã cho thuộc tính flex-grow trong đoạn mã CodePen này để xem ví dụ hoạt động.
Làm thế nào để thu nhỏ các mục trong một thùng chứa
Trong một số trường hợp, chiều rộng của phụ huynh có thể thu hẹp và các mục bên trong phụ huynh sẽ không còn vừa với bên trong. Bạn có thể dùng uốn cong thuộc tính để thu nhỏ kích thước của các hộp. Bằng cách này, chúng có thể được chứa bên trong cha mẹ.
Flex-co lại cho phép bạn chỉ định một tỷ lệ cho mức độ co lại của mỗi mục.
Thêm thuộc tính flex-co vào các mục div con. Thay đổi chiều rộng của phụ huynh và con để các mục không vừa với hộp đựng.
<div class="parent">
<div style="background-color: red; flex-shrink: 1"></div>
<div style="background-color: orange; flex-shrink: 1"></div>
<div style="background-color: yellow; flex-shrink: 1"></div>
<div style="background-color: green; flex-shrink: 2"></div>
<div style="background-color: blue; flex-shrink: 1"></div>
</div>.parent {
width: 500px;
display: flex;
}
.parent div {
width: 150px;
height: 150px;
}
Khi uốn cong 1 cho tất cả các mục có nghĩa là tất cả các mục sẽ co lại như nhau nếu giảm chiều rộng của mục gốc.
Nếu một trong các mặt hàng có độ co giãn lớn hơn, ví dụ:
<div style="background-color: green; flex-shrink: 2"></div>
Hộp màu xanh lá cây sẽ cố gắng thu nhỏ gấp đôi so với các hộp khác.
Xem mã cho thuộc tính flex-co trong đoạn mã CodePen này để xem ví dụ hoạt động.
Cách đẩy các mục sang hàng tiếp theo
Các flex-wrap thuộc tính cho phép bạn đẩy các mục sang dòng tiếp theo nếu chúng không vừa với chiều rộng của vùng chứa mẹ. Ở đây, các mục không bị co lại, và bạn sẽ có thể bảo toàn chiều cao và chiều rộng của các mục.
Các tùy chọn cho thuộc tính flex-wrap bao gồm:
flex-wrap: nowrap | wrap | wrap-reverseThêm thuộc tính flex-wrap vào vùng chứa flex-phụ huynh. Đảm bảo rằng chiều rộng của hộp chứa đủ nhỏ để không chứa vừa các vật dụng trẻ em bên trong. Điều này sẽ buộc mọi mục bị tràn vào một hàng mới.
<div class="parent">
<div class="red"></div>
<div class="orange"></div>
<div class="yellow"></div>
<div class="green"></div>
<div class="blue"></div>
</div>.parent {
width: 300px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
.parent div {
width: 100px;
height: 100px;
}Giá trị bọc sẽ định vị các mục bắt đầu ở trên cùng bên phải của vùng chứa. Giá trị quấn-đảo ngược sẽ đặt lại vị trí của các mục để bắt đầu ở dưới cùng bên phải của vùng chứa. Khi gói các mục, nó sẽ đẩy các mục lên một hàng mới ở trên thay vì ở dưới.
Nếu bạn chỉ định chiều cao trên vùng chứa mẹ, vùng chứa sẽ thêm khoảng cách giữa các hàng mục.
Nếu bạn muốn loại bỏ khoảng cách này, nhưng vẫn giữ độ cao của div mẹ, hãy sử dụng thuộc tính align-content. Chỉ định thuộc tính align-content là “flex-start” trong div chính:
.parent {
width: 300px;
height: 300px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}Thuộc tính align-content là một trong số các thuộc tính flexbox cốt lõi cho phép bạn kiểm soát việc căn chỉnh.
Xem mã cho thuộc tính flex-wrap trong đoạn mã CodePen này để xem một số ví dụ.
Cách đẩy các mục sang cột tiếp theo
Nếu bạn đang sử dụng một bố cục khác (chẳng hạn như một cột) và bạn vẫn cần các phần tử để bao bọc, bạn có thể sử dụng uốn cong bất động sản. Thuộc tính flex này là sự kết hợp của các thuộc tính flex-wrap và flex-direction.
Các kết hợp tùy chọn mẫu mà bạn có thể sử dụng cho thuộc tính flex-flow bao gồm:
flex-wrap: row nowrap | column nowrap | row wrap | column wrap | row wrap-reverse | column wrap-reverse
Thuộc tính này hoạt động tương tự như thuộc tính flex-wrap ở trên. Thêm flex-flow vào vùng chứa flex chính. Đảm bảo chiều rộng của vùng chứa mẹ đủ nhỏ để buộc các mục con phải bọc:
.parent {
width: 300px;
border: 1px solid black;
display: flex;
flex-flow: column wrap;
}
.parent div {
width: 100px;
height: 100px;
}Các mục sẽ quấn theo hướng xác định (hàng hoặc cột).
Xem mã cho thuộc tính flex-flow trong đoạn mã CodePen này để xem một số ví dụ.
Cách thay đổi thứ tự các mặt hàng
Nếu bạn cần sắp xếp lại các mục trên trang do bất kỳ loại dữ liệu động nào, bạn có thể sử dụng gọi món thuộc tính flex. Thuộc tính này cho phép bạn chỉ định thứ tự mà mỗi mặt hàng xuất hiện.
Các số không nhất thiết phải bắt đầu từ 1. Bạn có thể sử dụng bất kỳ số và khoảng nào, và thuộc tính order sẽ sắp xếp thứ tự các phần tử HTML từ thấp nhất đến cao nhất.
Thêm thuộc tính order vào từng mục bên trong vùng chứa linh hoạt chính:
<div class="parent">
<div class="red" style="order: 2"></div>
<div class="orange" style="order: 1"></div>
<div class="yellow" style="order: 5"></div>
<div class="green" style="order: 4"></div>
<div class="blue" style="order: 3"></div>
</div>
Trong trường hợp này, hộp màu cam sẽ ở ngoài cùng bên phải, tiếp theo là các hộp màu đỏ, xanh lam, xanh lá cây, sau đó là màu vàng.
Xem mã cho thuộc tính đặt hàng trong đoạn mã CodePen này để xem một số ví dụ.
Thử nghiệm với nhiều thuộc tính CSS hơn trong trang web của bạn
Bạn có thể sử dụng các thuộc tính linh hoạt này để làm cho trang web của bạn nhanh nhạy hơn. Điều này bao gồm sử dụng các thuộc tính flex-grow, flex-co, flex-wrap, flex-flow và order flex.
Bạn cũng có thể tìm hiểu thêm về các thuộc tính flex để giúp bạn căn chỉnh các phần tử HTML trên trang web của mình.
Đọc tiếp
Giới thiệu về tác giả
