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

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

Ví dụ sử dụng CSS Flexbox phần 1

Trong bài hướng dẫn sử dụng CSS Flexbox phần 1 này cũng như các phần sau mình sẽ lấy cùng một ví dụ để các bạn tiện theo dõi.Tùy theo mỗi ví dụ mà các thuộc tính CSS sẽ thay đổi và các yếu HTML cũng sẽ được thêm bớt sao cho phù hợp.

Trước khi giải thích từng thuộc tính của flexbox mình sẽ nói qua về code trong ví dụ nhé.

HTML

Đầu tiên mình tạo ra một khối bao bọc toàn bộ các yếu tố bên trong với class là container.Bên trong có thêm một số khối chính nữa, mỗi khối chính này đều có class là row và được đánh số thứ tự.Các khối chính này là nơi mình thao tác với các yếu tố CSS Flexbox.

Bên trong các khối chính là các hộp nhỏ hơn được đánh số thứ tự từ 1 tới 5.Các hộp này đóng vai trò thành phần con và khối chính có class row sẽ đóng vai trò thành phần mẹ.

CSS

Phần CSS thì mình tiến hành định dạng cho các thành phần mẹ và con như bạn thấy ở trên.Bạn cần chú ý đến CSS của class .row1.row2 vì đây là nơi duy nhất mình tiến hành thay đổi code qua mỗi ví dụ.

Để áp dụng thuộc tính flexbox này bạn cần khai báo thuộc tính display: flex; cho những yếu tố mẹ.Như ở trên mình phải khai báo thuộc tính display: flex; tại các yếu tố mẹ như .row1.row2 trước khi thêm các thuộc tính khác của flexbox.

Để thực sự hiểu rõ bản chất của vấn đề bạn nên đọc qua từng phần rồi xem luôn ví dụ, chỗ nào chưa hiểu hãy tự copy code về thực hành.

Sử dụng CSS Flexbox phần 1 – Flex-direction

Flex-direction là thuộc tính chỉ định phương hướng sắp xếp đối tượng con.Các giá trị của thuộc tính flex-direction là :

  • row(mặc định) : sắp xếp các yếu tố con theo chiều ngang từ trái sang phải
  • row-reverse : sắp xếp các yếu tố con theo chiều ngang từ phải sang trái
  • column : sắp xếp các yếu tố con theo chiều dọc từ trên xuống dưới
  • colmn-reverse : sắp xếp các yếu tố con theo chiều từ dưới lên trên

Flex-direction: row

flex-direction: row là giá trị mặc định của flex-direction nên khi viết CSS chúng ta sẽ lược bỏ nó mà không cần khai báo.Các thành phần con (items) sẽ được sắp xếp theo chiều ngang và hiển thị từ trái sang phải.

sử dụng flexbox phần 1 flex-derection row

Flex-direction: row-reverse

Với thuộc tính flex-direction: row-reverse các thành phần con (items) sẽ được sắp xếp theo chiều ngang và hiển thị từ phải sang trái.

sử dụng flexbox phần 1 flex-derection row-reverse

Để xem sự khác nhau giữa hai thuộc tính flex-direction: row flex-direction: row-reverse các bạn hãy theo dõi ví dụ bên dưới đây.

HTML

CSS

Kết quả

hướng dẫn sử dụng css flexbox phần 1 flex-direction:row

Flex-direction: column

flex-direction: column  : các thành phần con (items) sẽ được sắp xếp chiều dọc và hiển thị từ trên xuống dưới.

sử dụng flexbox phần 1 flex-derection column

Flex-direction: colmn-reverse

flex-direction: column-reverse cũng giống với thuộc tính flex-direction: column là các thành phần con (items) được sắp xếp chiều dọc nhưng khác ở chỗ là các (items) hiển thị từ dưới lên trên.

sử dụng flexbox phần 1 flex-derection column-reverse

Mình có lấy ví dụ ở codepen như dưới đây để các bạn hiểu rõ sự khác nhau của hai thuộc tính flex-direction: columnflex-direction: column-reverse.

HTML

CSS

Kết quả

hướng dẫn sử dụng css flexbox phần 1 flex-direction : column

Sử dụng CSS Flexbox phần 1 – Flex-wrap

Flex-wrap là thuộc tính cho phép ta điều chỉnh vị trí của các thành phần con khi chiều rộng màn hình thay đổi.Cụ thể ở đây là các thành phần con sẽ tự động nhảy xuống hàng dưới hay co lại sao cho phù hợp với chiều rộng màn hình.

Các giá trị của thuộc tính flex-wrap là :

  • nowrap : các yếu tố con sẽ không tự động xuống hàng mà sẽ co lại
  • wrap : các yếu tố con sẽ tự động nhảy xuống hàng dưới theo thứ tự từ trên xuống dưới
  • wrap-reverse : giống như với wrap nhưng sẽ theo thứ tự từ dưới lên trên

Ở ví dụ trong phần flex-wrap này mình sẽ tăng thêm 5  hộp nữa trong class .row, tổng cộng là có 10 hộp được đánh số thứ tự đầy đủ.

Flex-wrap:nowrap

flex-wrap: nowrap là giá trị mặc định của flex-wrap nên khi viết CSS bạn sẽ không cần khai báo nó.Các yếu tố con (items) sẽ được co lại sao cho vừa khít với chiều rộng màn hình.

sử dụng flexbox phần 1 flex-derection row

Flex-wrap:wrap

Khi sử dụng flex-wrap: wrap  thì các yếu tố con (items) sẽ tự động nhảy xuống hàng dưới khi tổng chiều rộng các thành phần con vượt quá chiều rộng thành phần mẹ.Điều này đảm bảo hình dạng các thành phần con không bị biến dạng khi co giãn màn hình.

sử dụng flexbox phần 1 flex-wrap wrap

Flex-wrap:wrap-reverse

flex-wrap:wrap-reversev cũng tương tự như flex-wrap: wrap  nhưng các thành phần con sẽ tự động xuống hàng theo chiều từ dưới lên trên.Đoạn này hơi khó hiểu nên bạn hãy xem ví dụ thực tế trong ví dụ bên dưới nhé.

sử dụng flexbox phần 1 flex-wrap wrap-reverse

Dưới đây là ví dụ minh họa về flex-wrap để các bạn dễ hình dung hơn.

HTML 

CSS

Kết quả

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

Sử dụng CSS Flexbox phần 1 – Flex-flow

flex-flow là thuộc tính giúp bạn điều chỉnh cả hai thuộc tính flex-direction flex-wrap cùng một lúc.

Công thức sử dụng flex-flow là :

Khi áp dụng công thức trên vào thực tế thì :

Và dưới đây là ví dụ thực tế khi sử dụng flex-flow.

HTML

CSS

Kết quả

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

Kết luận

Do flexbox có rất nhiều thuộc tính mà mỗi thuộc tính cũng có những giá trị khác nhau nên rất khó để có thể giải thích hết được về flexbox chỉ trong một bài viết.Mình sẽ làm hẳn một chuyên mục riêng giới thiệu về cách sử dụng flexbox, các bạn nhớ đón đọc nhé.

 

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