Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wordpress-seo domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /var/www/vinascript/html/wp-includes/functions.php on line 6114 Dàn trang với CSS Flexbox toàn tập - VinaScript
Skip to content
Hướng dẫn sử dụng kỹ thuật Flexbox trong CSS3 để chia bố cục nhanh hơn, không cần dùng đến float và clear float.
Để tạo bố cục trang trong CSS, chúng ta thường phải dùng các thuộc tính float và clear float để phân chia các cột cho website theo mong muốn. Hoặc chúng ta có thể dùng các CSS Grid Framework để làm việc nhanh hơn.
Tuy nhiên, nếu bạn làm việc với CSS thường xuyên thì bạn sẽ thấy việc này khá mất thời gian và khó khăn với kỹ thuật cũ, còn dùng Framework thì lại làm website của bạn có nhiều CSS dư thừa. Hoặc nếu bạn dùng kỹ thuật hiện tại để tạo bố cục trang thì bạn phải điều chỉnh lại kích thước cho mỗi thiết bị khác nhau rất phức tạp.
CSS3 được ra mắt như một phiên bản nâng cấp những điểm yếu của CSS trước đó, trong đó bao gồm cả việc nâng cấp kỹ thuật tạo bố cục trang linh động hơn, đơn giản hơn và thuộc tính CSS3 được dùng để làm điều này chính là Flexbox.
Flexbox là gì? Hãy cùng khám phá nó qua nội dung dưới đây nhé!
Flexbox là gì?
Flexbox là một kiểu dàn trang (layout mode) mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị.
Nói đơn giản, bạn không cần thiết lập kích thước của phần tử, không cần cho nó float mà chỉ cần thiết lập nó hiển thị chiều ngang hay chiều dọc, lúc đó các phần tử bên trong sẽ tự động hiển thị theo ý muốn.
Hiện nay, theo lời khuyên từ Mozilla thì chúng ta sử dụng Flexbox để thiết lập bố cục trong phạm vi nhỏ (ví dụ như những khung trong website) và khi thiết lập bố cục ở phạm vi lớn hơn (như chia cột website) thì vẫn nên ưu tiên sử dụng kiểu dàn trang theo dạng lưới (grid layout).
Giới thiệu thuật ngữ các thành phần trong Flexbox
Trước khi khám phá chi tiết về Flexbox, chúng ta cần có cái nhìn tổng quan về cấu trúc của nó và làm quen với một số thuật ngữ quan trọng.
Dưới đây là biểu đồ thể hiện cấu trúc của Flexbox, được minh họa bởi Mozilla Developer Network.
Hai thành phần quan trọng nhất trong một bố cục Flexbox là gồm container và item:
container: Là thành phần lớn bao quanh các phần tử bên trong, bạn sẽ thiết lập kiểu hiển thị inline (sắp xếp theo chiều ngang) hoặc kiểu sắp xếp theo chiều dọc. Khi đó, các item bên trong sẽ hiển thị dựa trên thiết lập của container này.
item: Các phần tử con của container được gọi là item, ở item 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ó.
Ngoài hai thành phần chính trên, nó còn chứa một số thành phần phụ như:
main start, main end: Khi thiết lập Flexbox, điểm bắt đầu của container gọi là main start và điểm kết thúc được gọi là main end. Điều này có nghĩa, các item bên trong sẽ hiển thị từ main start đến main end (hoặc được phép hiển thị đến main end). Và chiều vuông góc của nó là cross start, cross end cũng có ý nghĩa tương tự nhưng luôn vuông góc với main start, main end.
main axis: Trục này là trục chính để điều khiển hướng mà các item sẽ hiển thị. Như bạn thấy ở trên hình main axis là trục dọc nên các item sẽ hiển thị theo chiều dọc, tuy nhiên ta có thể sử dụng thuộc tính flex-direction để thay đổi trục của main axis và lúc đó các item sẽ hiển thị theo nó. Và cross axis luôn là trục vuông góc của main axis.
main size: Bạn có thể hiểu đơn giản là kích thước (chiều rộng hoặc dọc) của mỗi item dựa theo trục main axis.
cross size: Là kích thước (chiều rộng hoặc dọc) của mỗi item dựa theo trục cross axis.
Bắt đầu với Flexbox
Trước tiên mình bắt đầu với một cấu trúc đơn giản sau:
<html>
<div class=”container”>
<div class=”item item1″>1</div>
<div class=”item item2″>2</div>
<div class=”item item3″>3</div>
<div class=”item item4″>4</div>
</div>
</html>
Và một đoạn CSS ban đầu để thiết lập màu sắc và kích thước để dễ nhìn từng thành phần:
row: Chuyển trục main axis thành chiều ngang, nghĩa là hiển thị theo hàng.
colum: Chuyển trục main axis thành chiều dọc, nghĩa là hiển thị theo cột.
row-reverse: Hiển thị theo hàng nhưng đảo ngược vị trí các item.
column-reverse: Hiển thị theo cột nhưng đảo ngược vị trí các item.
flex-wrap
Bây giờ để hiểu cái này, chúng ta thử thêm chiều rộng cho mỗi item bên trong là 1000px xem chuyện gì sẽ xảy ra khi dùng Flexbox.
.item { width: 1000px; }
Như bạn thấy, dù chúng ta có thêm chiều rộng cho mỗi item bên trong là 1000px nhưng nó vẫn hiển thị trên một hàng đều nhau. Lý do là mặc định, Flexbox tự căn chỉnh các phần tử hiển thị đều nhau theo trục main axis của nó dựa theo chiều rộng của container.
Vì vậy, cho dù bạn có chỉnh chiều rộng vượt quá giới hạn của nó thì nó vẫn không bị nhảy lung tung.
Bây giờ hãy thử thêm thuộc tính flex-wrap: wrap vào container thử nhé!
.container { display: flex; flex-wrap: wrap; }
Thuộc tính này cho phép container có thể bọc lại các item kể cả khi kích thước của item bị thay đổi, mặc định là nowrap. Đồng thời có thể áp dụng với cả chiều dọc của container và item.
order
Trong đoạn HTML ví dụ, số thứ tự cho mỗi phần tử là 1, 2, 3 và 4 với class tương ứng là .item1, .item, .item3 và .item4. Mặc định item này sẽ hiển thị theo thứ tự trong HTML, nhưng với thuộc tính order chúng ta có thể sắp xếp lại vị trí của các item.
Mặc định thứ tự sắp xếp sẽ bắt đầu từ bên trái qua phải, từ trên xuống dưới. Nếu bạn chỉnh lại trục của main axis với thuộc tính flex-direction nó sẽ tự động thay đổi ngược lại.
flex-grow
Để làm ví dụ này, trước tiên hãy bỏ chức năng wrap và thiết lập chiều rộng của item là 50px.
.item { width: 50px; }
Bây giờ ở .item2 sẽ được gán giá trị flex-grow là 1.
.item2 { flex-grow: 1; }
Khi thiết lập flex-grow là 1, nó sẽ lấy phần trống còn lại của container đắp vào. Bây giờ hãy thử cho .item1 với flex-grow: 2 thử.
.item1 { flex-grow: 2; }
Lúc này giá trị flex-grow: 2 sẽ lấy phần dư lớn gấp đôi của flex-grow: 1.
flex-shrink
Bạn có thể hiểu mặc định tất cả các item đều có giá trị flex-shrink là 1.
Điều này có nghĩa là khi chúng ta thu nhỏ trình duyệt lại, các phần tử đều co lại bằng nhau. Tuy nhiên giả sử muốn .item3 nó co lại nhiều hơn so với các item khác thì sẽ tăng giá trị flex-shrink của nó lên.
.item3 { flex-shrink: 2; }
flex-basis
Cái này bạn có thể hiểu đơn giản nhất là gán cho item một kích thước nhất định. Bạn có thể sử dụng giá trị tuyệt đối hoặc tương đối (dựa trên kích thước của container).
.item3 { flex-basis: 500px; }
justify-content
Mặc định các item bên trong sẽ rải đều bắt đầu từ main start đến main end, tuy nhiên nếu container vẫn còn khoảng trống thì có thể dùng thuộc tính justify-content để điều chỉnh lại vị trí bắt đầu của nó.
Thuộc tính này có 5 giá trị và bạn có thể xem tấm ảnh bên dưới mình mượn của CSS Tricks để hiểu hơn về ý nghĩa các giá trị của justify-content.
Trong bài này Tự Học Lập Trình chỉ đề cập tới một số thuộc tính hay dùng trong Flexbox thôi, bạn có thể xem thêm danh sách thuộc tính Flexbox tại đây.
Lời kết
Flexbox trong CSS có thể coi là một phương pháp dàn trang hiệu quả, thay thế cho việc sử dụng float theo cách truyền thống. Nó được ưu tiên sử dụng khi bạn muốn sắp xếp các thành phần nhỏ trên trang web mà không phải dựa vào float, từ đó giảm thiểu sự phức tạp không cần thiết.
Mặc dù hiện tại không phải tất cả các trình duyệt đều hỗ trợ hoàn toàn CSS Flexbox, nhưng trong tương lai, đây chắc chắn sẽ là một trong những tính năng mà tất cả các trình duyệt sẽ hỗ trợ đầy đủ. Điều này xuất phát từ tính linh hoạt và khả năng tùy chỉnh cao mà Flexbox mang lại.
