Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Web Development

Thực hành Flexbox: Những thành phần Web đơn giản

by
Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trong hướng dẫn này chúng ta sẽ thực hành việc xây dựng các thành phần web với hai bài tập: chúng ta sẽ sử dụng Flexbox để xây dựng một thành phần "danh sách thumbnail" và một thành phần "sidebar".

Flex

Trong trường hợp bạn chưa biết, "layout linh hoạt" (Flexbox) là một tính năng CSS cung cấp một cách hiệu quả để bố trí, canh chỉnh và sắp xếp các phần tử trong một container cho trước. Kết hợp với Grid và các kỹ thuật khác, nó giúp tạo nên một mô-đun layout hoàn chỉnh hơn, để giải đáp cho float và table và các thủ thuật khác mà các nhà thiết kế web đã được sử dụng trong nhiều năm qua.

Với Flexbox, các phần tử có thể được đặt trong bất kỳ hướng nào và có thể điều chỉnh kích thước của chúng, hoặc là lớn lên để lấp đầy khoảng trống chưa được sử dụng hoặc thu hẹp lại để tránh tràn ra khỏi phần tử cha.

Bài tập 1: Thành phần Danh sách Thumbnail

Danh sách được sử dụng để hiển thị các dòng thông tin, chẳng hạn như một danh sách nhạc, chi tiết người dùng, hoặc phim ảnh. Thông thường, các danh sách có chứa các hình ảnh thu nhỏ mà chúng ta biết đến như là "thumbnail". Canh chỉnh hình ảnh với các phương pháp truyền thống có thể gặp một chút khó khăn và không phù hợp, nhưng với Flexbox chúng ta có thể định phong cách cho một thành phần danh sách với CSS tối thiểu.

Đối với thành phần này, hãy sử dụng một phần tử <ul> với các phần tử <li>:

Chúng ta sẽ sử dụng flexbox để tạo layout cho .list-item của chúng ta, thêm vào mỗi phần tử hai phần tử con trực tiếp giống như thế này:

how flex-grow and flex-shrink behave
cách flex-shrink và flex-grow vận hành

Hình này minh họa cách flex-shrinkflex-grow vận hành. Phần tử .list-item__image sẽ không bao giờ thu nhỏ, và .list-item__content sẽ chiếm lấy khoảng không còn lại trong container li.

Đây sẽ là cấu trúc HTML cho mỗi phần tử:

Và CSS cơ bản sẽ giống như thế này:

Đây là những gì mà các phong cách cơ bản cung cấp cho chúng ta:


Bạn sẽ thấy các avatar được định vị ở bên trái, các chi tiết ở bên phải.

Tôi lấy các chi tiết của người dùng từ randomuser.me. Bằng cách thêm một số phong cách phụ (phong cách cho phần tử bao quanh, bo tròn trên hình ảnh, kiểu chữ cơ bản, màu nền, vv), chúng ta sẽ có được điều này:

Bạn có thể xem đầy đủ CSS trên CodePen và tinh chỉnh nó. Ví dụ, nếu bạn di chuyển .list-item__image ra sau .list-item__content trong HTML bạn sẽ nhận được một danh sách hình thumbnail với hình ảnh ở bên phải mà không cần phải sử dụng bất kỳ lớp hoặc phong cách phụ nào.

Bài tập 2: Thành phần Sidebar

Nhiều trang web và các ứng dụng web sử dụng một sidebar để điều hướng. Trong bài tập này, chúng ta sẽ xây dựng một thành phần sidebar có thể sử dụng lại bằng Flexbox.

Layout có ba phần chính:

  1. logo
  2. phần điều hướng
  3. khối tiểu sử người dùng

Thông thường, phần khó khăn của việc xây dựng loại bố cục này là đặt khối tiểu sử ở dưới cùng của sidebar.

Định vị trí

Với giải pháp "truyền thống" này, chúng ta giả định rằng chiều cao phần tiểu sử người dùng sẽ là 70px. Vì vậy, hãy thiết lập padding 70px cho cạnh dưới của sidebar vào phần tử chứa nó. Nhưng nếu một lúc nào đó chúng ta thiết kế lại hộp tiểu sử làm thay đổi chiều cao của nó thì sao? Hoặc chúng ta quyết định đặt nó ở bên trên? Trong những trường hợp này, chúng ta cần phải tạo ra các lớp bổ sung cho sidebar hoặc sửa đổi các phong cách hiện tại, tuy nhiên không có cách nào là lý tưởng cả.

Sử dụng Flexbox

Với Flexbox chúng ta có thể giải quyết vấn đề này một cách hợp lý. Chúng ta sẽ sử dụng các kỹ thuật tương tự mà chúng ta sử dụng trong thành phần thumbnail, nhưng với một sự khác biệt nhỏ. Chúng ta sẽ thay đổi hướng chiều ngang thành chiều dọc với flex-direction: column;

Các phần bên trên và dưới của thành phần vẫn còn "chưa thể co lại". Phần tử ở giữa .sidebar_nav sẽ chiếm phần còn lại của khoảng không nhờ flex-grow: 1; của nó.

Vì vậy, đây là mã đánh dấu HTML:

Và các phong cách cơ bản của chúng ta:

Tóm lại, thành phần .sidebar có một thuộc tính flex-direction: column mà sẽ biến đổi dòng chảy các phần tử con của nó từ ngang sang dọc.

.sidebar__nav có thuộc tính flex-grow: 1 có nghĩa là nó sẽ chiếm hết tất cả khoảng không đang có trong container và sẽ đẩy hộp .sidebar__profile xuống dưới cùng của sidebar.

Với phương pháp này, chúng ta không cần phải lo lắng về chiều cao hộp tiểu sử. Vậy, nó cho chúng ta điều gì?

Đây là kết quả cuối cùng của sidebar với các phong cách bổ sung, trong đó có một số biểu tượng lấy từ Fontawesome.

Tổng kết

Flexbox đã thực sự thay đổi cách chúng ta có thể nghĩ về layout trên web, và rất vui là, nó được hỗ trợ bởi tất cả các trình duyệt hiện đại. Trong hướng dẫn này, chúng ta chỉ sử dụng một vài thuộc tính của Flexbox, nhưng có rất nhiều thuộc tính khác như bạn có lẽ đã hình dung. Trong bài hướng dẫn "Thực hành Flexbox" tiếp theo, chúng ta sẽ xây dựng các thành phần phức tạp hơn một chút, bao gồm các tính năng khác của Flexbox.

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.