Có nhiều cách để làm layout, tuy nhiên chúng ta sẽ chú trọng vào học layout thông qua Flexbox.
Tham khảo qua CSS display ở đây
Một số các loại display phổ biến:
inline: mặc định của
<span>và<img>, các tag inline sẽ xếp trên cùng 1 hàng theo mặc định. inline không có margin top margin bottomblock: mặc định của
<p>,<div>chiếm 100% width theo mặc địnhinline-block: coi như 1 kiểu dung hợp giữa inline và block, xếp trên cùng 1 hàng, không mặc định 100%, có thể margin top, bottom, set width height. là mặc định của
<button>none: là ẩn luôn thẻ đó đi. Cái này có ứng dụng nhiều, giúp chúng ta làm các loại giao diện có tính tương tác VD làm giao diện tab, giao diện popup, giao diện có 2 trạng thái bật tắt,...
flex và inline-flex: là 1 dạng mới cải tiến hơn so với block, mặc định của flex cũng chiếm 100% width, nhưng nó có thể kết hợp giữa thẻ cha và thẻ con để có nhiều kiểu giao diện/layout khác nhau. flex không phải là thuộc tính mặc định của thẻ html nên chúng ta cần phải thiết lập thủ công.
Đọc thêm bài này để hiểu thêm về flex
UI Builder Elementor sử dụng các thuộc tính của flex nên cần nắm đc bản chất của CSS Flex để dùng thành thạo UI Builder.
Bài tập: hoàn thành 24 bài tập của Flexbox Foggy
Một số layout cơ bản
Layout căn giữa theo 2 chiều:
Đây là mẫu layout khá phổ biến, để hiện nhanh 1 trang thông tin, hoặc dùng làm popup,...
Layout chia 2 cột khác chiều dài:
Thường dùng 1 cột để hiển thị ảnh, cột còn lại hiển thị thông tin chi tiết.
| Mấu chốt | CSS | UI Builder |
| container dùng row | ||
| cột 1 set width cố định | ||
| cột 2 set flex: 1 để chiếm hết không gian còn lại | ||
| về chiều cao thì tùy ý xử lý, có thể thêm overflow-y nếu muốn thêm scroll cho cột 2 | ||
| lưu ý: với UI Builder bản free bạn sẽ k add được Custom CSS. Workaround ở đây sẽ là tạo 1 block HTML và đặt id hoặc class cho các block và viết css ở trong block HTML. Ngoài ra, UI Builder sẽ thường có nhiều thẻ Div bao ngoài nên cần dùng kèm với Inspect của Chrome để check và style chính xác hơn. | click xem | click xem |
Tương tự với layout chia 2 cột chiều dài khác nhau chính là việc thay vì cột mà chia thành 2 hàng với chiều cao khác nhau.
Bài tập: Code bằng CSS hoặc UI Builder, tạo layout như trên, điền content (ảnh + text ) vào.
Bài tập nâng cao: Tìm hiểu về media query và để làm sao biến giao diện dạng 2 cột bên trên thành dạng 2 hàng này khi ở trên thiết bị di động. (đây chính là responsive)
Layout 2 bên trái phải
Thường dùng để bố trí các nút bấm, icon chức năng. Ngoài ra hầu hết các header của website đều theo dạng layout này (Logo và list các trang ở 2 bên trái phải)
| Mấu chốt | CSS | UI Builder |
| sử dụng justify-content: space-between để tạo khoảng không giữa 2 cột. Một số trường hợp cũng có thể sử dụng 1 div không có nội dung và đặt flex: 1 để chiếm nội dung ở giữa | Click xem | Click xem |
Layout 1 cột nội dung chính ở giữa:
Khi bạn sử dụng 1 chiếc màn hình to (tính theo viewport, không phải resolution), thì thường các website sẽ k dàn hết toàn bộ màn hình của bạn, mà chỉ tập trung phân bố ở 1 cột ở giữa. Đây chính là layout mặc định của UI Builder, khi ở Container có 1 ô Content Width chọn Boxed. Các block con sẽ được đặt trong 1 div con có set max-width, và sau đó căn giữa div cha.
Bạn hãy xem lại video UI Builder làm layout trái phải.
Để làm cho div con căn giữa div cha thì có rất nhiều cách, VD như hình trên là 1 cách chỉ cần CSS margin auto ở div con. (Lưu ý khi không thấy display được thiết lập, nó sẽ mặc định là block như đã giới thiệu ở đầu bài.)
Và khi sử dụng flex, thay vì margin auto thì ta có thể sử dụng align-self: center
Để làm responsive cho điện thoại, thì sẽ thêm thiết lập width là đủ, không cần sử dụng media query. Dù width có set là bao nhiêu thì nó cũng sẽ k vượt quá giá trị max-width. Như trong ảnh dưới đây sử dụng calc để không bị sát lề ở mobile (cách mỗi lề 15px);
Layout list X item trên 1 hàng (grid item)
Layout dạng này dùng để hiển thị nhiều nội dung dạng danh sách. VD: danh sách sản phẩm, danh sách bài viết,... và số lượng item trên 1 hàng sẽ phụ thuộc vào chiều dài màn hình, nếu màn hình nhiều diện tích, thì tăng số lượng item trên 1 hàng, giảm dần về 1-2 item nếu trên màn hình điện thoại.
Để làm được điều đó, ta không thể set width thủ công từng item được, chúng ta sẽ tạo CSS Variables và chỉ điều chỉnh giá trị này.
| Mấu chốt | CSS | UI Builder |
| Cha: flex-direction: row; flex-wrap: wrap | ||
| Con: set width theo công thức và thay đổi theo media query | Click xem | Click xem |
Layout floating
Là dạng layout bay nhảy tự do, khi mà giao diện có thể đè lên 1 giao diện khác. VD như popup, back to top button, chat support, notification, sticky header
Nếu muốn giao diện nổi toàn trang, dùng CSS position: fixed; kèm top, left, right, bottom .Nếu muốn giao diện nổi trong phạm vi của parent, thì đặt parent position: relative; và sau đó bản thân giao diện đặt position: absolute, kèm top, left, right, bottom. Nhiều trường hợp b chỉ cần dùng 2 trong số 4 thuộc tính (VD: top, left) và kèm width, height là đã có thể định vị được giao diện.