Học CSS Flexbox qua ví dụ thực tế Phần 1

Flexbox layout ra đời giúp cho việc lập trình responsive website trở nên dễ dàng hơn thay vì chỉ dùng float hay các thuộc tính về position như trước. Và hiện nay hầu hết các trình duyệt thông dụng đều đã hỗ trợ các thuộc tính của flexbox nên chúng ta có thể yên tâm sử dụng Flexbox (cho đời bớt khổ).

browsers support
Danh sách trình duyệt hỗ trợ (nguồn w3schools.com)

Để nắm sơ bộ về cách sử dụng Flexbox, chúng ta sẽ cùng làm một vài bài tập nhỏ để thực hành (dựa trên các ví dụ thực tế). Chú ý mỗi bài tập chỉ đề ra một hướng giải quyết, không phải là cách làm duy nhất (ai có cách làm hay hơn thì vui lòng comment bên dưới).

 

Giao diện nhiều cột có chiều rộng cố định

giao diện 4 cột
Ví dụ với phần Khóa học Hot của techmaster.vn

Giao diện này chúng ta chỉ cần dùng theo cách cổ điển là float: left, tuy nhiên có thể dùng Flexbox như sau: 

<section class="container">
  <div class="item">Web Frontend cho người mới học</div>
  <div class="item">Lập trình iOS Swift 8 buổi</div>
  <div class="item">Lập trình Java thực hành</div>
  <div class="item">Lập trình Node JS thực hành</div>
</section>
.container { display: flex; }
.item { flex-basis: 25%; }

Thuộc tính flex-basis có tác dụng thiết lập chiều rộng của phần tử trong Flexbox (phần tử con của phần tử có display: flex, ở đây là thẻ section). Chúng ta có thể thiết lập chiều rộng riêng cho từng phần tử con thay vì để chiều rộng bằng nhau như trong ví dụ này (rộng 25%). Ở màn hình mobile, chúng ta muốn chuyển giao diện 4 cột trở thành giao diện 2 cột thì chỉ cần thay đổi thuộc tính flex-basis để tăng chiều rộng mỗi cột lên 50%: 

.item { flex-basis: 50%; }

 

Giao diện nhiều cột có chiều rộng không cố định

footer
Ví dụ với phần Footer của viblo.asia, giao diện 2 cột bám sát 2 bên mép khung (không tính padding)

Với Flexbox ta có thể làm theo hướng như sau: 

<footer class="container">
  <div>© 2019 Viblo. All rights reserved.</div>
  <div>Feedback Help FAQs RSS Terms</div>
</footer>
.container { 
    display: flex;
    justify-content: space-between;
}

Sử dụng justify-content: space-between sẽ làm các phần tử trong Flexbox giãn đều nhau (có khoảng trống giữa các phần tử) và 2 phần tử ngoài cùng sẽ bám sát vào 2 bên mép.

justify content
Minh họa các giá trị có thể có của thuộc tính justify-content

justify-content: space-betweenspace-around cũng được áp dụng cho thanh menu có chiều rộng cố định nhưng menu item không xác định, khoảng cách giữa các menu item sẽ luôn đều nhau. Ví dụ như menu footer ở trên cũng dùng justify-content

 footer menu

Ở màn hình mobile nếu muốn chuyển thành giao diện 1 cột ta dùng thuộc tính flex-direction để đổi chiều ngang (hàng) sang chiều dọc (cột): 

.container { 
  flex-direction: column;
}

 

Tạm dừng lại tại đây kẻo bài viết dài quá không ai đọc 😅.

 

 

Tạo website tĩnh với Github Tạo website tĩnh với Github Đặng Quang Huy Blog Home Bạn sẽ chọn công cụ nào để hiện thực hóa ý tưởng game của mình? Bạn sẽ chọn công cụ nào để hiện thực hóa ý tưởng game của mình? Nguyễn Duy Khánh
Đặng Quang Huy

Web developer tại Techmaster, có kinh nghiệm làm việc trong các dự án nước ngoài, dự án start up và các dự án mã nguồn mở. Sở thích ngoài lập trình: Đọc sách, bơi lội, nghe nhạc và du lịch.