Bootstrap - Flex: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình web! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy thú vị này vào thế giới của hệ thống Flex trong Bootstrap. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi có thể đảm bảo với bạn rằng việc thành thạo Flex sẽ là một bước ngoặt trong bộ công cụ thiết kế web của bạn. Vậy, chúng ta cùng nhau lặn sâu và khám phá những bí ẩn của Flex nhé!

Flex là gì?

Trước khi chúng ta bắt đầu tập luyện mã code (và tôi có ý đùa!), hãy hiểu rõ Flex trong Bootstrap là gì. Flex là một hệ thống bố cục mạnh mẽ trong Bootstrap cho phép bạn tạo ra các thiết kế linh hoạt và tương ứng một cách dễ dàng. Nó giống như một枝 cây phép màu có thể sắp xếp các yếu tố web theo ý bạn!

Bật hành vi flex

Để bắt đầu sử dụng Flex, chúng ta cần bật nó lên trước. Điều này giống như việc bật công tắc đèn trước khi bạn có thể nhìn thấy trong một căn phòng tối. Dưới đây là cách bạn làm:

<div class="d-flex">
<!-- Các mục flex của bạn sẽ ở đây -->
</div>

Class đơn giản d-flex sẽ biến container của bạn thành một container flex. Mọi thứ bên trong container này bây giờ đều trở thành mục flex. Đúng là tuyệt vời phải không?

Hướng

Bây giờ chúng ta đã bật Flex, hãy nói về hướng. Trong thế giới Flex, bạn có thể sắp xếp các mục theo chiều ngang hoặc chiều dọc. Điều này giống như việc chọn giữa một kệ sách (chiều dọc) và một băng chuyền (chiều ngang).

<div class="d-flex flex-row">
<div>Mục 1</div>
<div>Mục 2</div>
<div>Mục 3</div>
</div>

<div class="d-flex flex-column">
<div>Mục 1</div>
<div>Mục 2</div>
<div>Mục 3</div>
</div>

Trong ví dụ này, flex-row sắp xếp các mục theo chiều ngang (từ trái sang phải), trong khi flex-column xếp chúng theo chiều dọc (từ trên xuống dưới).

Căn chỉnh nội dung

Căn chỉnh nội dung trong Flex giống như việc sắp xếp sách trên kệ. Bạn có thể đẩy chúng về đầu, cuối, giữa hoặc phân tán đều. Hãy xem cách làm:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Mỗi class này phân phối các mục flex khác nhau dọc theo trục chính. Hãy thử nghiệm chúng để thấy phép màu xảy ra!

Căn chỉnh các mục

Trong khi justify-content hoạt động dọc theo trục chính, align-items xử lý trục chéo. Hãy nghĩ về nó như việc điều chỉnh chiều cao của sách trên kệ. Dưới đây là cách bạn có thể sử dụng nó:

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

Các class này giúp bạn kiểm soát cách các mục flex được căn chỉnh theo chiều dọc bên trong container flex.

Căn chỉnh mục tự do

Đôi khi, bạn muốn một mục phá vỡ hàng ngũ và căn chỉnh khác biệt. Đó là lúc align-self phát huy tác dụng:

<div class="d-flex">
<div class="align-self-start">Đầu</div>
<div class="align-self-center">Giữa</div>
<div class="align-self-end">Cuối</div>
</div>

Điều này cho phép các mục flex cá nhân có sự căn chỉnh khác biệt so với anh chị em của chúng.

Điền đầy

Class flex-fill giống như một miếng bọt biển - nó làm cho mục flex hấp thụ tất cả không gian khả dụng:

<div class="d-flex">
<div class="flex-fill">Mục flex với nhiều nội dung</div>
<div class="flex-fill">Mục flex</div>
<div class="flex-fill">Mục flex</div>
</div>

Tất cả các mục có flex-fill sẽ có cùng chiều rộng, bất kể nội dung của chúng.

Tăng trưởng và thu nhỏ

Các thuộc tính tăng trưởng và thu nhỏ kiểm soát cách các mục flex giãn nở hoặc co lại. Điều này giống như việc có các dây đàn hồi trong bố cục của bạn:

<div class="d-flex">
<div class="flex-grow-1">Tăng trưởng</div>
<div>Định dạng</div>
<div class="flex-shrink-1">Thu nhỏ</div>
</div>

Mục flex-grow-1 sẽ giãn nở để lấp đầy không gian khả dụng, trong khi flex-shrink-1 sẽ co lại nếu cần thiết.

Margins tự động

Margins tự động trong Flex giống như các khe cách ly kỳ diệu. Chúng đẩy các mục flex xa nhau:

<div class="d-flex">
<div class="mr-auto">Trái</div>
<div>Trung tâm</div>
<div class="ml-auto">Phải</div>
</div>

Điều này tạo ra một bố cục trái-trung tâm-phải với khoảng cách tự động.

Cuộn

Khi bạn có quá nhiều mục để phù hợp trong một dòng, flex-wrap đến cứu trợ:

<div class="d-flex flex-wrap">
<div>Mục 1</div>
<div>Mục 2</div>
<div>Mục 3</div>
<div>Mục 4</div>
<div>Mục 5</div>
</div>

Điều này cho phép các mục cuộn xuống dòng tiếp theo khi chúng hết không gian.

Thứ tự

Thuộc tính order cho phép bạn sắp xếp lại các mục flex mà không thay đổi HTML. Điều này giống như việc có một remote điều khiển bố cục của bạn:

<div class="d-flex">
<div class="order-3">Đầu trong DOM, cuối trong bố cục</div>
<div class="order-2">Thứ hai trong DOM, thứ hai trong bố cục</div>
<div class="order-1">Thứ ba trong DOM, đầu tiên trong bố cục</div>
</div>

Căn chỉnh nội dung flex

Khi bạn có nhiều dòng mục flex, align-content giúp bạn kiểm soát cách các dòng này được phân cách:

<div class="d-flex flex-wrap align-content-start" style="height: 200px;">
<div>Mục</div>
<div>Mục</div>
...
</div>

Điều này có thể đặc biệt hữu ích cho việc tạo các bố cục kiểu lưới.

Đối tượng media

Cuối cùng, hãy xem một ví dụ thực tế - đối tượng media. Đây là một mẫu phổ biến trong thiết kế web, và Flex làm cho nó rất dễ dàng:

<div class="d-flex">
<div class="flex-shrink-0">
<img src="..." alt="...">
</div>
<div class="flex-grow-1 ms-3">
Đây là một số nội dung từ thành phần media. Bạn có thể thay thế này bằng bất kỳ nội dung nào và điều chỉnh nó theo nhu cầu.
</div>
</div>

Điều này tạo ra một đối tượng media linh hoạt với hình ảnh ở bên trái và nội dung ở bên phải.

Và thế là bạn đã hoàn thành hành trình với hệ thống Flex của Bootstrap! Nhớ rằng, thực hành làm nên hoàn hảo, vì vậy đừng ngần ngại thử nghiệm với các thuộc tính này. Trước khi bạn biết điều gì, bạn sẽ tạo ra các bố cục linh hoạt, tương ứng như một chuyên gia!

Dưới đây là bảng tóm tắt tất cả các thuộc tính Flex chúng ta đã covered:

Thuộc tính	Mô tả	Các class ví dụ
Bật Flex	Biến container thành flex container	d-flex
Hướng	Đặt trục chính của flex container	flex-row, flex-column
Căn chỉnh nội dung	Căn chỉnh các mục dọc theo trục chính	justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around
Căn chỉnh các mục	Căn chỉnh các mục dọc theo trục chéo	align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch
Căn chỉnh mục tự do	Căn chỉnh mục cá nhân	align-self-start, align-self-center, align-self-end
Điền đầy	Làm cho mục flex hấp thụ tất cả không gian khả dụng	flex-fill
Tăng trưởng	Cho phép mục flex giãn nở	flex-grow-1
Thu nhỏ	Cho phép mục flex co lại	flex-shrink-1
Margins tự động	Tạo khoảng cách giữa các mục	mr-auto, ml-auto
Cuộn	Cho phép các mục cuộn xuống dòng tiếp theo	flex-wrap
Thứ tự	Thay đổi thứ tự các mục	order-1, order-2, v.v.
Căn chỉnh nội dung flex	Căn chỉnh các dòng flex	align-content-start, align-content-end, v.v.

Chúc các bạn may mắn, những ngôi sao thiết kế web tương lai!

Credits: Image by storyset