Trong bài đăng này, bạn sẽ tìm hiểu các khái niệm quan trọng nhất về bố cục flexbox trong CSS, điều này sẽ giúp cuộc sống của bạn dễ dàng hơn nếu thỉnh thoảng bạn thấy mình gặp khó khăn với bố cục CSS.

Chúng tôi sẽ chỉ tập trung vào các nguyên tắc cốt lõi, đồng thời loại bỏ những thứ bạn không nên quan tâm cho đến khi bạn hiểu những điều cơ bản.

Bạn cũng nên xem màn hình cơ bản về CSS flexbox mà tôi đã tạo. Nó tương tác, vì vậy bạn thực sự có thể chơi với mã!

1. Hộp đựng và mặt hàng

Hai thành phần chính của bố cục flexbox là vùng chứa (màu xanh) và các mục (màu đỏ). Trong ví dụ mà chúng ta sẽ xem xét trong hướng dẫn này, cả vùng chứa và mục đều là của div. Kiểm tra mã chương trình tại đây nếu bạn quan tâm.

Bố cục ngang

Để tạo bố cục linh hoạt, chỉ cần cung cấp cho vùng chứa thuộc tính CSS sau.

.container {
    display: flex;
}

Lưu ý rằng bạn chưa cần phải làm bất cứ điều gì với các mục . Chúng sẽ tự động được định vị dọc theo trục ngang.

Bố cục dọc

Trong bố cục ở trên, trục chính là trục ngang và trục chéo là trục dọc. Khái niệm về trục là điều quan trọng cần hiểu để sử dụng flex đúng cách.

Bạn có thể hoán đổi hai trục bằng cách thêm cột flex-direction :.

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

2. Căn đều nội dung và Căn chỉnh các mục

Để làm cho danh sách nằm ngang trở lại, chúng ta có thể chuyển hướng linh hoạt từ cột sang hàng, vì điều này sẽ lật lại các trục của bố cục linh hoạt trở lại.

Lý do các trục quan trọng cần hiểu là vì các thuộc tính justify-content và align-items kiểm soát cách các mục được định vị dọc theo trục chính và trục chéo tương ứng.

Hãy căn giữa tất cả các mục dọc theo trục chính bằng cách sử dụng justify-content:

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

biện minh-nội dung:

• flex-start ( mặc định )
• flex-end
• trung tâm
• không gian giữa
• không gian xung quanh

• bắt đầu linh hoạt
• flex-end
• trung tâm
• đường cơ sở
• căng (mặc định)

3. Các mặt hàng

Điều cuối cùng chúng ta sẽ tìm hiểu là bản thân các mặt hàng và cách thêm các kiểu dáng cụ thể cho từng mặt hàng đó.

Giả sử chúng tôi muốn điều chỉnh vị trí của mục đầu tiên. Chúng tôi làm điều này bằng cách cung cấp cho nó một thuộc tính CSS của align-self , thuộc tính này chấp nhận các giá trị giống hệt như align-items :

.item1 {
  align-self: flex-end;
}

Và đó là nó!

Tất nhiên là còn rất nhiều thứ nữa để tìm hiểu về flexbox, nhưng các khái niệm ở trên là những khái niệm tôi sử dụng thường xuyên nhất và do đó, điều quan trọng nhất là phải hiểu đúng cách.

Cảm ơn vì đã đọc! Tên tôi là Per, tôi là người đồng sáng lập Scrimba - một cách tốt hơn để dạy và học mã.

Nếu bạn đã đọc đến đây, tôi khuyên bạn nên xem bản demo này!