CSS - Flexbox: Hướng dẫn cơ bản về Bố cục Hộp Linh hoạt

Xin chào các nhà vô địch CSS tương lai! 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 thú vị vào thế giới CSS Flexbox. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng Flexbox là một trong những công cụ thay đổi cuộc chơi sẽ làm cho cuộc sống thiết kế web của bạn trở nên dễ dàng hơn. Hãy cùng nhau khám phá nhé!

CSS Flexbox là gì?

Hãy tưởng tượng bạn đang sắp xếp nội thất trong một căn phòng. Bạn muốn mọi thứ đều phù hợp hoàn hảo, nhưng bạn cũng muốn có sự linh hoạt để dễ dàng di chuyển chúng. Đó chính xác là điều mà CSS Flexbox làm cho bố cục web! Đây là một mô hình bố cục cho phép bạn thiết kế các cấu trúc bố cục linh hoạt và phản hồi mà không cần sử dụng floats hoặc positioning.

Flexbox giúp bạn dễ dàng:

• Căn chỉnh các mục theo phương vertial và horizontal
• Đảo thứ tự các mục mà không thay đổi HTML
• Tạo các phần tử chứa linh hoạt

Các thành phần của Flexbox

Trước khi chúng ta bắt đầu lập mã, hãy hiểu hai thành phần chính của Flexbox:

1. Flex Container: Đây là phần tử cha giữ tất cả các mục flex.
2. Flex Items: Đây là các phần tử con trong flex container.

Hãy tưởng tượng nó như một hộp (container) với các món đồ chơi (items) bên trong. Cách bạn sắp xếp các món đồ chơi phụ thuộc vào cách bạn thiết lập các thuộc tính Flexbox.

Bố cục Flexbox cơ bản

Hãy bắt đầu với một ví dụ đơn giản:

<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>

.flex-container {
display: flex;
}

.flex-item {
padding: 20px;
background-color: #f1f1f1;
margin: 10px;
}

Trong ví dụ này, chúng ta đã tạo một flex container với ba flex items bên trong. Thuộc tính display: flex; trên container là gì激活 Flexbox.

Bố cục Flexbox theo phương vertial

Muốn堆叠 các mục của bạn theo phương vertial? Đó là điều dễ dàng như bánh!

.flex-container {
display: flex;
flex-direction: column;
}

Thuộc tính flex-direction: column; thay đổi trục chính thành phương vertial,堆叠 các mục của bạn từ trên xuống dưới.

Thuộc tính Justify Content của Flexbox

Bây giờ, hãy nói về vị trí. Thuộc tính justify-content căn chỉnh các mục theo phương horizontal và chấp nhận các giá trị sau:

Giá trị	Mô tả
flex-start	Các mục được gom lại hướng về đầu của flex-direction
flex-end	Các mục được gom lại hướng về cuối của flex-direction
center	Các mục được căn giữa theo đường line
space-between	Các mục được phân phối đều trong line
space-around	Các mục được phân phối đều với khoảng cách bằng nhau

.flex-container {
display: flex;
justify-content: space-between;
}

Điều này sẽ phân tán các mục của bạn đều nhau trong container.

Thuộc tính Align Items của Flexbox

Trong khi justify-content hoạt động theo trục chính, align-items hoạt động trên trục chéo. Nó chấp nhận các giá trị sau:

Giá trị	Mô tả
stretch	Các mục được kéo giãn để phù hợp với container (mặc định)
flex-start	Các mục được đặt ở đầu của trục chéo
flex-end	Các mục được đặt ở cuối của trục chéo
center	Các mục được căn giữa trong trục chéo
baseline	Các mục được căn chỉnh sao cho các baseline của chúng align

.flex-container {
display: flex;
align-items: center;
}

Điều này sẽ căn giữa tất cả các mục vertial trong container.

Căn giữa một Div bằng Flexbox

Đây là một mẹo hay: việc căn giữa một div theo phương horizontal và vertial rất dễ dàng với Flexbox!

.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* hoặc bất kỳ chiều cao nào */
}

Thuộc tính Wrap của Flexbox

Đôi khi, bạn có thể muốn các mục của bạn cuộn xuống dòng tiếp theo nếu chúng không vừa. Đó là lúc flex-wrap được sử dụng:

.flex-container {
display: flex;
flex-wrap: wrap;
}

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

Thuộc tính Align Self của Flexbox

Nếu bạn muốn căn chỉnh chỉ một mục khác biệt, align-self sẽ đến cứu trợ!

.flex-item:nth-child(2) {
align-self: flex-end;
}

Điều này căn chỉnh mục thứ hai xuống dưới của container, bất kể các mục khác.

Các thuộc tính của Flexbox Container

Dưới đây là bảng các thuộc tính Flexbox bạn có thể áp dụng cho container:

Thuộc tính	Mô tả
display	Định nghĩa một flex container
flex-direction	Định nghĩa hướng của flex items
flex-wrap	Xác định liệu flex items có nên cuộn hay không
flex-flow	Viết tắt cho flex-direction và flex-wrap
justify-content	Căn chỉnh flex items theo trục chính
align-items	Căn chỉnh flex items theo trục chéo
align-content	Căn chỉnh flex lines khi có thêm không gian trong container

Các thuộc tính của Flexbox Items

Và đây là các thuộc tính bạn có thể áp dụng cho flex items:

Thuộc tính	Mô tả
order	Xác định thứ tự của một flex item
flex-grow	Xác định mức độ phát triển của một flex item so với các mục khác
flex-shrink	Xác định mức độ thu nhỏ của một flex item so với các mục khác
flex-basis	Xác định chiều dài ban đầu của một flex item
flex	Viết tắt cho flex-grow, flex-shrink và flex-basis
align-self	Xác định sự căn chỉnh cho một flex item cụ thể

Và thế là bạn đã bước ra thế giới CSS Flexbox. Nhớ rằng, giống như học骑自行车, nó có thể cảm thấy不稳定 ban đầu, nhưng với sự thực hành, bạn sẽ nhanh chóng zooming around trong không thời gian.

Đừng sợ thử nghiệm với các thuộc tính này. Cách tốt nhất để học là làm. Thử tạo các bố cục khác nhau, chơi với các thuộc tính, và xem会发生什么. Trước khi bạn nhận ra, bạn sẽ tạo ra các bố cục đẹp mắt, linh hoạt một cách dễ dàng!

Chúc may mắn, các nhà vô địch CSS tương lai!

Credits: Image by storyset