hướng dẫn sử dụng css flexbox phần 3

Hướng dẫn sử dụng CSS Flexbox phần 310 phút đọc

Sử dụng CSS Flexbox phần 3 là bài viết kết thúc phần lý thuyết của series “Học và sử dụng flexbox toàn tập” trên blog của mình.Học hết bài này có nghĩa là bạn đã làm quen với tất cả những thuộc tính của Flexbox, giờ bạn chỉ cần chăm chỉ luyện tập thực hành nữa là sẽ thành pro trong một ngày không xa.

Trong phần 1 và 2 mình đã giới thiệu đến các bạn những thuộc tính áp dụng cho thành phần mẹ.Trong phần 3 này sẽ là những thuộc tính Flexbox áp dụng cho thành phần con.

Sử dụng CSS Flexbox phần 3 – order

Order : vị trí; : thuộc tính này dùng để sắp xếp vị trí từng thành phần con một cách tùy ý mà không cần quan tâm đến thứ tự mặc định ban đầu của HTML.

sử dụng css flexbox phần 3 order

Sử dụng thuộc tính order này rất đơn giản.Bạn chỉ cần gán thuộc tính này cho thành phần con sau đó chỉ định vị trí theo số thứ tự.Mặc định số thứ tự sẽ ngoài cùng bên trái sẽ là 1 và tăng dần qua phải.Bạn có thể chỉ định giá trị âm cho thuộc tính này.

Để bạn hiểu rõ hơn mình có làm ví dụ như dưới đây.

HTML

CSS

Kết quả 

css flexbox order

Nếu bạn vẫn chưa hiểu có thể copy code về làm thử.Bạn lưu ý khi đã sử dụng thuộc tính order này bạn cần chỉ định vị trí cho tất cả các thành phần con, không thì trình duyệt sẽ không hiểu và sắp xếp không như ý các thành phần con chưa được chỉ định vị trí.

Sử dụng CSS Flexbox phần 3 – flex-grow

Flex-grow : giá-trị; : đây là thuộc tính dùng để thay đổi độ giãn của thành phần con khi chiều rộng của trình duyệt tăng lên.Thuộc tính flex-grow mang giá trị 1 sẽ là mốc để quyết định độ giãn của các thành phần còn lại.Thuộc tính flex-grow này không nhận giá trị âm.

sử dụng css flexbox phần 3 flex-grow

Ví dụ như hình trên đây thì box số 1 sẽ có độ giãn gấp ba lần so với box số 2.Dưới đây là mẫu code ví dụ để bạn thực hành.

HTML

CSS

Kết quả 

css flexbox flex-grow

Bạn hãy mở trình soạn thảo code lên rồi thử thu kéo màn hình sau đó xem sự giãn ra của các thành phần con trong ví dụ trên đây để hiểu rõ hơn nhé.Các thành phần của hàng trên trong ví dụ này không được áp dụng thuộc tính flex-grow nên độ giãn của chúng sẽ khác với các thành phần của hàng dưới.

Sử dụng CSS Flexbox phần 3 – flex-shrink

Flex-shrink : giá-trị; : đây là thuộc tính ngược lại với flex-grow ở trên.Thuộc tính này dùng để thay đổi độ co lại của thành phần con khi chiều rộng trình duyệt giảm đi.Thuộc tính flex-shrink mang giá trị 1 cũng là mốc để quyết định độ co lại của các thành phần khác.

sử dụng css flexbox phần 3 flex-shrink

Như hình minh họa trên đây thì box số 2 sẽ có độ co lại gấp đôi so với box số 1 và số 4.Bạn hãy copy mẫu code dưới đây về để thực hành xem kết quả.Khi co màn hình lại theo chiều ngang bạn sẽ thấy rõ sự khác biệt khi thêm thuộc tính flex-shrink và khi không thêm thuộc tính này.

HTML

CSS

Kết quả

hướng dẫn sử dụng css flexbox phần 3 flex-shrink

Trong ví dụ này để dễ so sánh thì mình chỉ thêm thuộc tính flex-shrink vào cho các thành phần ở hàng dưới mà thôi.

Sử dụng CSS Flexbox phần 3 – flex-basis

Flex-basis : giá-trị; : Thuộc tính này dùng để chỉ định chiều rộng của thành phần con theo một tỷ lệ nhất định.Giá trị mặc định của thuộc tính này là auto.

sử dụng css flexbox phần 3 flex-basis

Như ở ví dụ trên đây dù chiều rộng của màn hình có thay đổi như thế nào đi nữa thì chiều rộng của các box cũng sẽ được đảm bảo đúng như tỷ lệ đã được thiết lập ban đầu.

Cụ thể ở như ở hình minh họa trên sẽ là box1 : 50%, box2 : 20%, box3 : 30% và box4 : 40%.Dưới đây là mẫu code ví dụ để bạn tham khảo.

HTML

CSS 

Kết quả

hướng dẫn sử dụng css flexbox phần 3 flex-basis

Thuộc tính flex-basis này cho kết quả rất trực quan nên mình nghĩ bạn sẽ hiểu ngay thôi.Hãy thực hành nếu bạn có gì chưa rõ nhé.

Sử dụng CSS Flexbox phần 3 – flex

Flex : flex-grow, flex-shrink, flex-basis; : bạn có thể viết gộp lại ba thuộc tính trên bằng khai báo cú pháp như bên.

Thay vì viết từng thuộc tính riêng lẻ như trên thì cách viết thuộc tính gộp như thế này phổ biến hơn và được khuyến khích vì sẽ giảm được lượng code phải viết mà kết quả thì không hề thay đổi.

Phần này mình sẽ không lấy ví dụ cụ thể vì nó khá đơn giản.Bạn chỉ cần viết đúng cú pháp như trên là được.Nếu chưa hiểu rõ bạn có thể tự code trên trình sọan thảo code như Brackets để xem kết quả.

Sử dụng CSS Flexbox phần 3 – align-self

Align-self : giá-trị; : thuộc tính chỉ định vị trí thành phần con theo chiều dọc.Đây là thuộc tính áp dụng cho thành phần con.

Nếu thành phần mẹ không còn khoảng trống theo chiều dọc thì dù có chỉ định giá trị nào cho thuộc tính này đi nữa bạn sẽ không thấy sự thay đổi.

Thuộc tính này có những giá trị như dưới đây :

  • auto : áp dụng giá trị thuộc tính align-items nếu có
  • flex-start : sắp xếp thành phần con về phía trên
  • flex-end : sắp xếp thành phần con về phía dưới
  • center : sắp xếp thành phần con về phía trung tâm
  • baseline : sắp xếp các thành phần con theo một đường cơ sở
  • stretch : làm đầy thành phần con theo chiều dọc
sử dụng css flexbox phần 3 align-self

Bạn có thể sử dụng thuộc tính align-items để làm những việc trên đây nhưng nó sẽ tác dụng toàn bộ thành phần con trong khối flexbox.Với thuộc tính align-self bạn có thể chỉ định giá trị tương ứng cho từng thành phần con.

Đương nhiên là giá trị được chỉ định bằng thuộc tính align-self sẽ có độ ưu tiên cao hơn so với align-items.Bạn nên lưu ý điều này để áp dụng linh hoạt vào trong thực tế nhé.

Chú ý khi sử dụng CSS Flexbox

Thuộc tính vertical-align sẽ không có tác dụng

Khi đã sử dụng thuộc tính verticla-align thì bạn sẽ không thể sử dụng được thuộc tính flexbox nữa.Do đó khi muốn sắp xếp các thành phần con theo chiều dọc thì hãy sử dụng thuộc tính align-items của flexbox.Còn nếu muốn sắp xếp từng thành phần con theo chiều dọc hãy nhớ đến thuộc tính align-self của flexbox.

Tính tương thích với các trình duyệt

sử dụng css flexbox phần 3 can i use

Ở thời điểm mình viết bài viết này thì phần lớn các trình duyệt phổ biến đều hỗ trợ Flexbox.Tuy nhiên vẫn có một số phiên bản cũ của các trình duyệt phổ biến chưa hỗ trợ Flexbox.

Khi áp dụng Flexbox vào các dự án bạn nên tìm hiểu yêu cầu của khách hàng là hỗ trợ phiên bản trình duyệt nào để mà áp dụng phương pháp phù hợp nhé.

Website thực hành CSS Flexbox

Flexbox-Froggy-A-game-for-learning-CSS-flexbox

Flexbox có rất nhiều thuộc tính và để thành thạo từng đó thuộc tính sẽ mất không ít thời gian.Thời gian đầu mình hay sử dụng website “Flexbox Froggy” để luyện tập.Cũng khá khó khăn mới có thể giải hết được các câu đố.

Flexbox Froggy này là game vận dụng các thuộc tính của Flexbox để sắp xếp vị trí cho các con ếch về đúng vị trí của nó.Bạn không cần viết nhiều code mà chỉ cần viết thuộc tính flexbox cùng giá trị hợp lý là ok.

Kết luận

Trong những bài tiếp theo của series “Học và sử dụng Flexbox” toàn tập mình sẽ giới thiệu những ví dụ thường xuyên gặp trong thực tế.

Các bạn hãy tiếp tục theo dõi và ủng hộ blog trong thời gian sắp tới nhé.Chúc các bạn luôn thành công trong công việc.

 

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x