Bật Mí Top 20+ align with là gì [Tuyệt Vời Nhất]

Ở những bài học trước, Quantrimang.com đã hướng dẫn bạn cách thiết kế bố cục trang web bằng cách sử dụng thuộc tính float, kỹ thuật clear float hay đặt các position lồng nhau. Tuy nhiên phương pháp này thường phải viết khá nhiều code CSS và kết quả thì thực sự là khó đoán trước, có thể như ý bạn, cũng có thể cực kì… tệ.

Nhưng thật may mắn, Flexbox Layout đã ra đời để cải thiện những nhược điểm này. Với Flexbox, bạn có thể giải quyết rất nhiều vấn đề về dàn trang trong CSS một cách linh hoạt, dễ dàng và tiết kiệm thời gian chỉ bằng một vài dòng code. Vậy chúng ta cùng tìm hiểu xem Flexbox là gì và lý do tại sao nó lại mạnh mẽ như vậy?

Flexbox là gì?

Flexbox Layout (hay còn gọi là Flexible Box) là một kiểu bố cục trang có khả năng tự cân đối kích thước, thay đổi chiều rộng/chiều cao và thứ tự phần tử bên trong để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình.

Với bố cục thông thường, bạn cần phải thiết lập kích thước của phần tử, thiết lập hiển thị dạng block hay inline, cho nó float, còn với Flexbox bạn chỉ cần thiết lập phần hiển thị theo chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn..

Lưu ý: Flexbox Layout phù hợp nhất để thiết lập bố cục ở quy mô nhỏ, còn thiết lập bố cục với phạm vi lớn hơn thì vẫn nên sử dụng kiểu thông thường là dàn trang theo dạng lưới (grid layout)

Các khái niệm cơ bản và thuật ngữ

Bố cục Flex được thiết lập từ một khung lớn (parent container) đóng vai trò là khung linh hoạt (flex containter) và các thẻ con ngay trong nó (immediate children) đóng vai trò các mục nhỏ linh hoạt (flex item).

Dưới đây là sơ đồ cấu trúc Flexbox:

Thành phần quan trọng nhất của Flexbox là

• container: là thành phần lớn bao quanh các phần tử bên trong, các item bên trong sẽ hiển thị dựa trên thiết lập của container này.
• item: là phần tử con của container, bạn có thể thiết lập nó sẽ sử dụng bao nhiêu cột trong một container, hoặc thiết lập thứ tự hiển thị của nó.

Các item sẽ được bố trí theo trục main axis (bắt đầu từ main-start, kết thúc ở main-end) hoặc theo trục cross axis (bắt đầu từ cross-start, kết thúc ở cross-end).

• main axis: đây là trục chính để điều khiển hướng mà các item sẽ hiển thị. Lưu ý, main axis không phải lúc nào cũng nằm ngang như sơ đồ trên, bạn có thể sử dụng thuộc tính flex-direction để thay đổi hướng của trục và lúc đó các item sẽ hiển thị theo nó.
• main-start | main-end: khi thiết lập flexbox, các item nằm trong container hiển thị từ điểm bắt đầu gọi là main-start tới điểm kết thúc gọi là main-end.
• main size: kích thước (chiều rộng hoặc chiều cao) của các item, tùy thuộc vào hướng của main axis.
• cross axis: cross axis luôn là trục vuông góc của main axis. Hướng của nó phụ thuộc vào hướng của main axis.
• cross-start | cross-end: có ý nghĩa tương tự nhưng luôn vuông góc với main start, main end.
• cross size: kích thước (chiều rộng hoặc chiều cao) của các item dựa trên trục cross axis, tùy thuộc vào hướng của main axis.

Các thuộc tính của Flex Container

display

Để sử dụng flex trong css thì đơn giản là chúng ta chỉ cần khai báo thuộc tính display: flex

.container { display: flex; /* hoặc inline-flex */ }

Lưu ý: các cột CSS thông thường không sử dụng được trong flex container.

flex-direction

Thuộc tính flex-direction xác định hướng của main-axis để container sắp xếp các item.

Cú pháp:

.container { flex-direction: row | row-reverse | column | column-reverse; }

Các tham số:

• row: mặc định, flex item được sắp xếp theo chiều ngang, từ trái qua phải (main axis nằm ngang).
• row-reverse: flex item được sắp xếp theo chiều ngang, từ phải qua trái (main axis nằm ngang).
• column: flex item được sắp xếp theo chiều dọc, từ trên xuống dưới (main axis đứng dọc).
• column-reverse: flex item được sắp xếp theo chiều dọc, từ dưới lên trên (main axis đứng dọc).

Ví dụ:

.flex-container { display: flex; flex-direction: row; } .flex-container { display: flex; flex-direction: row-reverse; } .flex-container { display: flex; flex-direction: column; } .flex-container { display: flex; flex-direction: column-reverse; }

Code đầy đủ:

<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-direction: column; background-color: #e9d8f4; } .flex-container > div { background-color: #58257b; width: 100px; margin: 10px; color: white; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>Thuộc tính flex-direction</h1> <div class=”flex-container”> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>

flex-wrap

Theo mặc định, item sẽ tự động thay đổi kích thước phần tử để nó luôn hiển thị trên cùng một dòng dù bạn có resize trình duyệt theo kích thước nào, điều này dễ làm cho nội dung bên trong (nếu có) bị giãn hay ép nhỏ lại, có thể gây xấu giao diện.

Vì vậy, ta có thuộc tính flex-wrap cho phép item tự động xuống dòng khi kích thước container thay đổi.

Cú pháp:

.container{ flex-wrap: nowrap | wrap | wrap-reverse; }

Tham số:

• nowrap: mặc định, tất cả các item sẽ nằm trên một dòng.
• wrap: khi kích thước container thay đổi và tổng chiều rộng các item cộng lại lớn hơn chiều rộng của container thì item sẽ tự động xuống dòng.
• wrap-reverse: tương tự như wrap, nhưng thay vì xuống dòng thì item sẽ tự động nhảy lên trên.

Ví dụ:

.flex-container { display: flex; flex-wrap: nowrap; } .flex-container { display: flex; flex-wrap: wrap; } .flex-container { display: flex; flex-wrap: wrap-reverse; }

Chạy code sau rồi thử resize trình duyệt để thấy rõ hơn sự khác biệt nhé:

<!DOCTYPE html> <html> <head> <style> .flex-container { display: flex; flex-wrap: wrap-reverse; background-color: #e9d8f4; } .flex-container > div { background-color: #58257b; width: 100px; margin: 10px; color: white; text-align: center; line-height: 75px; font-size: 30px; } </style> </head> <body> <h1>Thuộc tính flex-wrap</h1> <div class=”flex-container”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> </body> </html>

Top 20 align with là gì viết bởi Cosy