----
2.6.5 Tạo bố cục bằng kĩ thuật Flexbox
Ở các phần trước đã tìm hiểu hai kĩ thuật tạo bố cục là
float và position, phần này sẽ tìm hiểu tiếp một kĩ thuật nữa, đó là kĩ thuật flexbox[1].
Flexbox là viết rút gọn của flexible box, từ flexible nghĩa
là linh hoạt. Flexbox thường được sử dụng để tạo bố cục cho các thành phần của
một ứng dụng web hoặc các thành phần có kích thước nhỏ của trang web.
Ý tưởng của flexbox là sắp xếp các mục (item) trong một
thùng chứa (container), các item có thể tự động thay đổi kích thước cho vừa với
container. Nghĩa là không cần thiết lập kích thước cho item, không cần float,
các item sẽ tự điều chỉnh việc hiển thị sao cho vừa gọn trong container.
Điểm khác biệt quan trọng nhất của flexbox so với các kiểu bố
cục truyền thống, là tính linh hoạt của hướng hiển thị (direction-agnostic). Ở
kiểu bố cục truyền thống, một phần tử kiểu block sẽ hiển thị theo hướng từ trên
xuống dưới (vertical), một phần tử kiểu inline sẽ hiển thị theo hướng ngang
(horizontal). Với flexbox, người lập trình có thể thay đổi hướng hiển thị theo
chiều ngang hoặc chiều dọc. Lưu ý: flexbox chỉ sắp xếp các phần tử theo một chiều
(one-dimension), hoặc là chiều ngang hoặc là chiều dọc.
Flexbox không phải là một thuộc tính đơn lẻ, mà nó là cả một
mô-đun, với nhiều thành phần và thuộc tính đi kèm.
Hai thành phần cơ bản của flexbox là container (còn gọi là parent
element) và các mục con bên trong gọi là item (hay children).
Xem hình minh họa,
Nếu bố cục truyền thống hoạt động dựa trên các đặc tính hiển
thị của phần tử kiểu block và inline thì flexbox hiển thị dựa trên một mô hình có
tên là “flex-flow directions”.
Xem hình minh họa,
Trong đó,
– main-axis: hướng
ngang của container, mặc định, các item sẽ được xếp theo chiều ngang, tuy nhiên,
có thể thay đổi hướng bằng thuộc tính flex-direction
– main-start, main-end:
các item sẽ được đặt trong container, theo hàng, hướng từ main-start tới main-end
– main-size: kích
thước (chiều rộng hoặc chiều cao) của item tính theo main axis
– cross-size: kích
thước (chiều rộng hoặc chiều cao) của item tính theo cross axis
– cross-start,
cross-end: các hàng sẽ được đặt theo thứ tự từ cross-start tới cross-end
Để dễ hiểu về cách hoạt động của flexbox, quan sát ví dụ
sau,
[HTML]
<div class="container">
<div
class="item1">Mục 1</div>
<div
class="item2">Mục 2</div>
<div
class="item3">Mục 3</div>
<div
class="item4">Mục 4</div>
</div>
[CSS]
Để tạo ra một container, sử dụng thuộc tính display: flex;
.container {
display: flex;
}
Khi đó, các phần tử bên trong container sẽ trở thành item,
và hiển thị theo mô hình flexbox. Từ đây có thể sử dụng rất nhiều các thuộc
tính để định dạng container và item.
Dưới đây là một số ví dụ về cách sử dụng các thuộc tính,
– Mặc định, các item sẽ xuất hiện theo chiều ngang, từ trái
sang phải; để đổi chiều từ phải sang trái, sử dụng thuộc tính flex-direction: row-reverse cho
container
.container {
display: flex;
flex-direction:
row-reverse;
}
– Để các item xuất hiện theo chiều dọc, sử dụng thuộc tính flex-direction: column
.container {
display: flex;
flex-direction:
column;
}
– Để thay đổi thứ tự xuất hiện của các item, sử dụng thuộc
tính order: value, với value là giá
trị để xác định vị trí của item trong nhóm. Giá trị value mặc định của các item
đều là 0, khi đó, thứ tự hiển thị sẽ dựa theo mã nguồn (HTML). Khi có thiết lập
value, item nào có value lớn sẽ đứng sau. Trong trường hợp item cùng giá trị
value, thì thứ tự xuất hiện sẽ dựa vào thứ tự trong mã nguồn.
Ví dụ, với hai lệnh CSS dưới đây, thứ tự xuất hiện của các
item sẽ là: Mục 1 > Mục 4 > Mục 2 > Mục 3
.item2 {
order: 1;
}
.item3 {
order: 2;
}
Để làm việc với flexbox còn có rất nhiều các thuộc tính khác.
Ví dụ các thuộc tính áp dụng cho container: display, flex-direction, flex-wrap,
flex-flow, justify-content, align-item, align-content. Ví dụ các thuộc tính áp
dụng cho item: order, flex-grow, flex-shrink, flex-basis, flex, align-self.
Tạo form đơn giản bằng Flexbox
Vừa chơi vừa học Flexbox:
2.6.6 Tạo bố cục bằng kĩ thuật Grid system
Khác với flexbox, là kĩ thuật tạo bố cục một chiều và thường
được sử dụng để tạo bố cục cho các vùng nhỏ; grid là kĩ thuật tạo bố cục hai
chiều (two-dimension), có thể thao tác theo cả hàng và cột. Grid thường được sử
dụng để tạo bố cục cho toàn trang hoặc cho các thành phần nhỏ trên trang web.
Cũng giống với kĩ thuật flexbox, hệ thống grid cũng gồm hai
thành phần và các thuộc tính. Hai thành phần gồm phần tử cha (parent element),
phần tử chứa, được gọi là container và phần tử con, là các phần tử nằm bên
trong, được gọi là item.
Xem hình minh họa,
Grid định nghĩa một hệ thống lưới gồm các đường (line) ngang
và dọc. Khoảng không gian được giới hạn bởi các đường ngang/dọc được gọi là hàng/cột,
hay được gọi chung là track.
Phần giao nhau của một hàng và cột gọi là ô (cell), tập hợp
nhiều ô gọi là một vùng (area).
Độ rộng của track có thể được thiết lập cố định bằng px,
cũng có thể thiết lập tương đối bằng %, hoặc bằng đơn vị fr. Fr là viết tắt của
fraction, nghĩa là một phần không gian của container.
Có thể đặt các item vào vị trí chính xác trên grid bằng tên
hàng, số hàng hoặc địa chỉ của một vùng.
Container và item
Để định nghĩa một phần tử là container, thiết lập thuộc tính
display: grid hoặc display: inline-grid.
Ví dụ,
[HTML]
<div class="wrapper">
<div
class="item1">Mục 1</div>
<div
class="item2">Mục 2</div>
<div
class="item3">Mục 3</div>
<div
class="item4">Mục 4</div>
<div
class="item5">Mục 5</div>
</div>
[CSS]
.wrapper {
display: grid;
}
Ngay khi .wrapper
được thiết lập display: grid, các phần
tử con trực tiếp của nó sẽ trở thành item.
Track
Để định nghĩa số hàng và số cột của grid, sử dụng thuộc tính
grid-template-column và grid-template-row. Đây cũng chính là
việc tạo các track.
Ví dụ sau sẽ tạo một grid gồm ba cột (track), kích thước của
mỗi cột là 200px, các item sẽ được đặt vào hệ thống grid, mỗi item nằm ở một
cell.
.wrapper {
display: grid;
grid-template-columns:
200px 200px 200px;
}
Xem hình minh họa,
Đơn vị fr
Ví dụ sau sẽ tạo ra ba track với độ rộng bằng nhau (tính bằng
fr) và độ rộng này có thể tăng hoặc giảm theo kích thước của container,
.wrapper {
display: grid;
grid-template-columns:
1fr 1fr 1fr;
}
Ví dụ sau sẽ tạo ra ba track, với độ rộng track đầu là 2fr,
hai track sau là 1fr,
.wrapper {
display: grid;
grid-template-columns:
2fr 1fr 1fr;
}
Tạo nhiều track
Để tạo nhiều track có thể sử dụng từ khóa repeat.
Ví dụ, với đoạn mã sau,
.wrapper {
display: grid;
grid-template-columns:
1fr 1fr 1fr;
}
Có thể viết lại bằng repeat,
.wrapper {
display: grid;
grid-template-columns:
repeat(3, 1fr);
}
Flexbox và grid là hai kĩ thuật tạo bố cục có nhiều ưu điểm,
nên tìm đọc và thực hành theo các tài liệu đầy đủ về hai kĩ thuật này.
[1]
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Cập nhật [2/10/2019]
-----------
Xem thêm: Học làm web (51) - CSS căn bản (27)