Trước đó khi tất cả chúng ta thiết kế web nhất là dàn trang layout, thực đơn, chia các cột cho những thành phần trong web thì hồ hết đều sử dụng các tính chất như float kèm Từ đó là clear float để chia cột . Khó khăn là lúc responsive và hiển thị trên nhiều thiết bị phải chỉnh sửa code khá nhiều nên rất tốn thời kì.

Bạn Đang Xem: Học CSS Flexbox toàn tập phần 1

Hoặc nhanh hơn thì những bạn sử dụng CSS Framework như bootstrap chẳng hạn, nhưng như vậy thì website của bạn lại sở hữu nhiều đoạn code ‘dư thừa’ bạn không sử dụng gây ảnh hưởng tác động đến tốc độ website…

Thế là Flexbox được sinh ra để cải thiện tình hình này, hỗ trợ cho việc dàn trang, canh các thành phần với nhau linh hoạt, dễ dàng và tiết kiệm ngân sách và chi phí thời kì hơn rất nhiều.

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

# Tính chất Display: Flex

Để sử dụng flex trong css thì đơn giản là tất cả chúng ta chỉ có sử dụng tính chất display: flex. Mình có layout như vậy này để các bạn dễ hình dung nha.

<div class=”box”> <div class=”item”></divvàgt; <div class=”item”></divvàgt; <div class=”item”></divvàgt; </divvàgt;

Và mình css như sau:

.box { display: flex; width: 100%; background-color: #1a1c28; height: auto; } .item { width: 150px; height: 150px; } .item:nth-of-type(1) { background-color: #bf4470; } .item:nth-of-type(2) { background-color: #ffa400; } .item:nth-of-type(3) { background-color: #07a787; }

Và đây là kết quả

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

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

Các bạn nhớ check code ở Codepen. Và mình khuyên thêm đó là nên code theo để hiểu nó hoạt động ra sao, ra sao nhé chớ đọc nhiều rồi gật gù đúng đúng mà không làm thì cũng công cốc.

# Flex-direction

Xem Thêm : Tin Tức

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

Mặc định thì những items trong flexbox được sắp xếp theo trục X và từ trái qua phải. Đó là lý do vì sao khi mình dùng display: flex ở ví dụ ở trên đầu thì những items được sắp xếp thành hàng ngang và hiển thị từ trái qua phải.

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

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

flex-direction: row-reverse cũng giống như tính chất flex-direction: row nhưng những items sẽ tiến hành hiển thị từ phải qua trái

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

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

# Flex-wrap

Các bạn nhớ resize trình duyệt ở những demo codepen ở tại chỗ này để thấy sự khác nhau nha.

Xem Thêm : Mật Khẩu Đường Truyền Viettel Là Gì, Nhờ Support Viettel Xin Lại Mật Khẩu Wan

Được cho phép các items tự động hóa xuống hàng hoặc vẫn luôn nằm trên cùng một hàng khi kích thước container thay đổi. Hơi khó hiểu nhỉ, xem demo tại chỗ này nha.

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

Mặc định là nowrap nên các bạn không nhất thiết phải set. Khi tất cả chúng ta resize trình duyệt lại nếu các bạn sử dụng tính chất flex-wrap: nowrap thì những items sẽ tự động hóa co lại cho chớ không có rớt xuống hàng, điều này dễ làm cho content bên trong(nếu có) bị ép lại sở hữu thể gây xấu giao diện.

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

flex-wrap: wrap trái lại so với flex-wrap: nowrap khi kích thước container thay đổi và tổng chiều rộng các items cộng lại to thêm chiều rộng của container bọc ngoài thì nó sẽ rớt xuống.

Ví dụ như ở demo Codepen. Có 3 items mỗi item 150px, độ rộng(width) của container là 100% là khuông hiển thị ở codepen. Khi tất cả chúng ta resize trình duyệt thì khuông container nó cũng nhỏ theo, khi chạm qua item số 3 màu xanh lá 1 chút thì item sẽ tự động hóa 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ự như flex-wrap: wrap nhưng nó trái lại thay vì item rớt xuống thì nó rớt lên. Resize trình duyệt phát hiểu ngay.

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

Lâu lâu các bạn có thấy một số người dùng tính chất flex-flow: row wrap. Tính chất này viết để gộp 2 tính chất flex-direction và flex-wrap lại nhé các bạn. Nó như vậy này flex-flow: flex-direction flex-wrap. Ứng với flex-direction và flex-wrap các bạn thay giá trị tương ứng vào nhé.

# Tạm kết

Do bài này dài và tôi cũng muốn giảng giải chi tiết cụ thể cho những bạn. Nên mình chia bài về flexbox này thành 5 phần(4 phần lý thuyết và một trong những phần thực hiện) cho những bạn dễ theo dõi và đỡ ngán khi đọc do dài quá.

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

.