Học CSS Flexbox toàn tập phần 1 – Evondev Weblog

Trước đây lúc chúng ta thiết kế internet đặc biệt là dàn trang structure, menu, chia những cột cho những thành phần trong internet thì gần như đều dùng những thuộc tính như float kèm theo đấy là clear float để chia cột . Khó khăn là lúc responsive và hiển thị trên nhiều thiết bị buộc phải chỉnh sửa code khá nhiều nên siêu tốn thời kì.

Hoặc nhanh hơn thì khách hàng dùng CSS Framework như bootstrap chẳng hạn, nhưng như thế thì web site của bạn lại có nhiều đoạn code ‘dư thừa’ bạn ko dùng gây tương tác tới tốc độ web site…

Thế là Flexbox được sinh ra để cải thiện tình hình này, giúp cho việc dàn trang, canh những thành phần có nhau linh hoạt, dễ dàng và tiết kiệm thời kì hơn siêu nhiều.

Hôm nay mình viết bài này để chúng ta cùng tìm hiểu về sức mạnh của CSS Flexbox để xem phương pháp dùng nó như thế nào, nó có những thuộc tính hay gì mà nhiều người lại dùng nó thay đổi cho float hay inline thế nhỉ ?

# Thuộc tính Show: Flex

Để dùng flex trong css thì đơn giản là chúng ta chỉ cần dùng thuộc tính show: flex. Mình có structure như thế này để khách hàng dễ hình dung nha.

<div class=”field”> <div class=”merchandise”></div> <div class=”merchandise”></div> <div class=”merchandise”></div> </div> Và mình css như sau: .field { show: flex; width: 100%; background-color: #1a1c28; top: auto; } .merchandise { width: 150px; top: 150px; } .merchandise:nth-of-type(1) { background-color: #bf4470; } .merchandise:nth-of-type(2) { background-color: #ffa400; } .merchandise:nth-of-type(3) { background-color: #07a787; } Và đây là kết quả

Xem Thêm  Phương pháp chơi Osu bằng bàn phím toàn tập cho sport thủ Otaku

See the Pen CSS Flexbox by EvonDev (@blackzero) on CodePen.

Roài giờ đây mình sẽ đi vào chi tiết từng thuộc tính khác của CSS Flexbox kèm theo hình minh họa để cho khách hàng dễ hình dung nha. Mình sẽ giải thích từng thuộc tính 1 cho khách hàng kèm hình minh họa cho khách hàng dễ hiểu. Giả dụ ko hiểu thì bình luận tại dưới mình sẽ trả lời thắc mắc của khách hàng. À 1 lưu ý bé:

Khách hàng nhớ test code tại Codepen. Và mình khuyên thêm đấy là nên code theo để hiểu nó hoạt động như thế nào, ra sao nhé chớ đọc nhiều rồi gật gù đúng đúng mà ko khiến thì cũng công li.

# Flex-direction

Như tên gọi của nó là hướng(trục), thì trong flexbox có 2 trục chính đấy là trục X và trục Y giống như biểu đồ toán học đấy khách hàng. Lưu ý là flexbox chỉ hiển thị theo 1 trong 2 hướng thôi nha, chứ ko hiển thị 1 lần 2 hướng như CSS Grid được(Sau này mình sẽ viết bài này sau).

Học CSS Flexbox toàn tập phần 1 - Evondev Blog

Mặc định thì những gadgets trong flexbox được sắp xếp theo trục X và từ trái qua buộc phải. Ấy là nguyên nhân vì sao lúc mình dùng show: flex tại dí dụ tại trên đầu thì những gadgets được sắp xếp thành hàng ngang và hiển thị từ trái qua buộc phải.

Trong flex-direction có 4 giá trị bao gồm: row, row-reverse, column và column reverse. Khách hàng nên mở Codepen mình chèn tại trên lên rồi chèn từng thuộc tính vào thử xem có giống hình mình minh họa ko nhé.

Xem Thêm  Sinh 5 1984 mệnh gì? Tuổi gì? Tính bí quyết người sinh 1984

flex-direction: row là giá trị mặc định trong flex-direction những gadgets sẽ được sắp xếp theo chiều ngang(trục X) và hiển thị từ trái sang buộc phải.

Học CSS Flexbox toàn tập phần 1 - Evondev Blog

flex-direction: row-reverse cũng giống như thuộc tính flex-direction: row nhưng những gadgets sẽ được hiển thị từ buộc phải qua trái

Học CSS Flexbox toàn tập phần 1 - Evondev Blog

flex-direction: column những gadgets được sắp xếp chiều dọc(trục Y) và hiển thị từ trên xuống dưới

Học CSS Flexbox toàn tập phần 1 - Evondev Blog

flex-direction: column-reverse cũng giống có thuộc tính flex-direction: column là những gadgets được sắp xếp chiều dọc(trục Y) nhưng khác tại chỗ là những gadgets hiển thị từ dưới lên trên

Học CSS Flexbox toàn tập phần 1 - Evondev Blog

# Flex-wrap

Khách hàng nhớ resize trình thông qua tại những demo codepen tại dưới đây để thấy sự khác nhau nha.

Cho phép những gadgets tự động động xuống hàng hoặc vẫn luôn nằm trên cùng 1 hàng lúc kích thước container thay đổi đổi. Khá khó hiểu nhỉ, xem demo dưới đây nha.

Flex-wrap có 3 giá trị đấy là wrap, nowrap và wrap-reverse.

Mặc định là nowrap nên khách hàng ko cần buộc phải set. Lúc chúng ta resize trình thông qua lại trường hợp khách hàng dùng thuộc tính flex-wrap: nowrap thì những gadgets sẽ tự động động co lại cho chớ ko có rớt xuống hàng, điều này dễ khiến cho content material bên trong(trường hợp có) bị ép lại có thể gây xấu giao diện.

See the Pen CSS Flexbox by EvonDev (@blackzero) on CodePen.

flex-wrap: wrap ngược lại so có flex-wrap: nowrap lúc kích thước container thay đổi đổi và tổng chiều rộng những gadgets cùng lại lớn hơn chiều rộng của container bọc bên cạnh thì nó sẽ rớt xuống.

Xem Thêm  AE388 – Sân chơi uy tín đang lôi kéo sự lưu ý của người chơi

Dí dụ như tại demo Codepen. Có 3 gadgets từng merchandise 150px, độ rộng(width) của container là 100% là khuôn hiển thị tại codepen. Lúc chúng ta resize trình thông qua thì khuôn container nó cũng bé theo, lúc chạm qua merchandise số 3 màu sắc xanh lá 1 chút thì merchandise sẽ tự động động rớt xuống.

See the Pen CSS Flexbox wrap by EvonDev (@blackzero) on CodePen.

Cuối cùng là flex-wrap: wrap-reverse cũng tương tự động như flex-wrap: wrap nhưng nó ngược lại thay đổi vì merchandise rớt xuống thì nó rớt lên. Resize trình thông qua phát hiểu ngay.

See the Pen CSS Flexbox wrap-reverse by EvonDev (@blackzero) on CodePen.

Nhiều ngày nhiều ngày khách hàng có thấy 1 số khách hàng thuộc tính flex-flow: row wrap. Thuộc tính này viết để gộp 2 thuộc tính flex-direction và flex-wrap lại nhé khách hàng. Nó như thế này flex-flow: flex-direction flex-wrap. Ứng có flex-direction và flex-wrap khách hàng thay đổi giá trị tương ứng vào nhé.

# Tạm kết

Do bài này dài và mình cũng muốn giải thích chi tiết cho khách hàng. Nên mình chia bài về flexbox này thành 5 phần(4 phần lý thuyết và 1 phần thực hành) cho khách hàng dễ theo dõi và đỡ ngán lúc đọc do dài quá.

Bài tiếp theo mình sẽ nói tới 4 thuộc tính khác đấy là justify-content, align-items, align-self và order khách hàng nhớ đón đọc nha. Giả dụ có ý kiến hay góp ý hoặc ko hiểu thì bình luận bên dưới mình sẽ trả lời. Chúc khách hàng 1 ngày phải chăng lành.

.