Mục lục:

Vùng chứa Flexbox là gì?
Vùng chứa Flexbox là gì?

Video: Vùng chứa Flexbox là gì?

Video: Vùng chứa Flexbox là gì?
Video: 75. Tìm hiểu các thành phần của flexbox 2024, Có thể
Anonim

MỘT thùng đựng linh hoạt mở rộng các mục để lấp đầy không gian trống có sẵn hoặc thu nhỏ chúng để ngăn tràn. Quan trọng nhất, flexbox bố cục theo hướng bất khả tri trái ngược với bố cục thông thường (khối dựa trên chiều dọc và nội tuyến dựa trên chiều ngang).

Về vấn đề này, bạn sử dụng Flexbox như thế nào?

Tóm lược

  1. Sử dụng hiển thị: flex; để tạo một vùng chứa linh hoạt.
  2. Sử dụng justify-content để xác định căn chỉnh theo chiều ngang của các mục.
  3. Sử dụng căn chỉnh mục để xác định căn chỉnh theo chiều dọc của các mục.
  4. Sử dụng hướng linh hoạt nếu bạn cần cột thay vì hàng.
  5. Sử dụng các giá trị đảo ngược hàng hoặc đảo ngược cột để lật thứ tự mặt hàng.

làm thế nào để bạn tạo một thùng chứa Flex? Trước khi bạn có thể sử dụng bất kỳ flexbox tài sản, bạn cần xác định một thùng đựng linh hoạt trong bố cục của bạn. Bạn tạo một thùng chứa linh hoạt bằng cách đặt thuộc tính hiển thị của một phần tử thành một trong các flexbox giá trị bố cục: uốn cong hoặc nội tuyến- uốn cong . Theo mặc định, uốn cong các mục được bố trí theo chiều ngang trên trục chính từ trái sang phải.

Theo cách này, Flexbox được sử dụng để làm gì?

Flexbox là một mô hình bố trí cho phép các phần tử căn chỉnh và phân phối không gian bên trong một vùng chứa. Sử dụng chiều rộng và chiều cao linh hoạt, các phần tử có thể được căn chỉnh để lấp đầy một khoảng trống hoặc phân phối không gian giữa các phần tử, điều này làm cho nó trở thành một công cụ tuyệt vời để dùng cho hệ thống thiết kế đáp ứng.

Hướng mặc định trong vùng chứa Flex là gì?

Các vỡ nợ sắp xếp sau khi áp dụng màn hình: uốn cong là để các mặt hàng được sắp xếp theo trục chính từ trái qua phải. Hình ảnh động bên dưới cho thấy điều gì sẽ xảy ra khi uốn cong - phương hướng : cột được thêm vào thùng đựng hàng yếu tố. Bạn cũng có thể thiết lập linh hoạt - phương hướng để đảo ngược hàng và đảo ngược cột.

Đề xuất: