học và sử dụng css flexbox toàn tập

Giới thiệu Series học và sử dụng CSS Flexbox toàn tập4 phút đọc

Về series học và sử dụng CSS Flexbox toàn tập

CSS Flexbox là một phương pháp dàn trang mới được đưa vào sử dụng kể từ khi CSS3 ra đời.Nó nhanh chóng trở thành một trong những phương pháp dàn trang phổ biến nhất trên thế giới thay thế cho người đồng hương trước đó là float.

Ra đời cùng thời điểm với CSS Flexbox còn có một phương pháp dàn trang sử dụng CSS khác cũng rất nổi tiếng đó là CSS Grid Layout.Mỗi phương pháp đều có đặc điểm riêng.Về phương pháp dàn trang sử dụng CSS Grid Layout mình sẽ viết riêng một series khác trong thời gian tới.

Còn trong series bài viết “Học và sử dụng CSS Flexbox toàn tập” này mình sẽ đề cập đến toàn bộ những thuộc tính của Flexbox cùng những giá trị của chúng.Không chỉ có lý thuyết khô khan mà mỗi phần đều có hình ảnh minh họa kèm theo ví dụ trực quan.

Cuối series bài viết mình sẽ giới thiệu đến các bạn một website tuyệt vời để có thể luyện tập nâng cao trình độ sử dụng CSS Flexbox.Không dài dòng nữa hãy cùng mình tìm hiểu trong series bài viết này có gì nhé.

Bài viết trong series từ A đến Z

Series bài viết có ba bài đầu là về lý thuyết và ví dụ để bạn hiểu rõ ý nghĩa cũng như cách sử dụng CSS Flexbox.Chỉ cần hiểu rõ hết các ý trong từng bài này thôi là bạn đã có thể tự dàn trang một cách nhanh chóng và linh hoạt.

Hướng dẫn sử dụng CSS Flexbox phần 1

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

Trong phần 1 này mình sẽ hướng dẫn các bạn sử dụng 3 thuộc tính quan trọng nhất của Flexbox đó là : flex-direction, flex-wrap flex-flow.Đây đều là các thuộc tính áp dụng cho thành phần mẹ hay nói cách khác là thành phần lớn nhất bao bọc toàn bộ các thành phần con bên trong.

Những thuộc tính này sẽ giúp định hướng các thành phần con bên trong theo chiều dọc hay ngang, đồng thời tùy chỉnh cách sắp xếp những thành phần con này khi kích thước màn hình thay đổi.

 

Hướng dẫn sử dụng CSS Flexbox phần 2

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

Trong phần 2 này mình vẫn giới thiệu đến các bạn những thuộc tính áp dụng cho thành phần mẹ.Những thuộc tính đó là :  justify-contentalign-items.

Hai thuộc tính này sẽ giúp bạn điều chỉnh vị trí của các thành phần con như ý muốn.Đây là bài hết sức quan trọng vì đây là hai thuộc tính được sử dụng nhiều nhất khi áp dụng Flexbox để dàn trang.

Mình có lấy ví dụ minh họa rất cụ thể để các bạn theo dõi.Nếu bạn chưa hiểu hãy copy code về rồi tự phân tích thử xem nhé.

 

Hướng dẫn sử dụng CSS Flexbox phần 3

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

Phần 3 này cũng là phần cuối lý thuyết trong series “Học và sử dụng CSS Flexbox toàn tập”.Ở phần 3 này mình sẽ giới thiệu đến các bạn toàn bộ những thuộc tính áp dụng cho các thành phần con.

Những thuộc tính này bao gồm : order, flex-grow, flex-shrink, flex-basis, flexalign-self.Mỗi thuộc tính này đều có một vai trò, công dụng nhất định.Bạn sẽ hiểu rõ từng thuộc tính qua ví dụ trong bài.

Kết luận

Sau khi học xong series này mình hi vọng bạn sẽ có đủ kiến thức để vận dụng CSS Flexbox dàn trang trong các dự án sắp tới của mình.Nếu có chỗ nào cần góp ý về series này bạn đừng ngần ngại hãy liên hệ với mình qua mẫu liên hệ mà mình có gắn link ở chân trang.

Chúc bạn sớm hoàn thành series và nhanh chóng sử dụng thành thạo CSS Flexbox 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