Hướng dẫn này chỉ cho bạn cách khám phá các phần tử hộp linh hoạt trên một trang, cũng như kiểm tra và sửa đổi bố cục hộp linh hoạt trong bảng điều khiển Phần tử.
Ảnh chụp màn hình xuất hiện trong bài viết này được lấy từ trang web này: Căn giữa phần tử văn bản bằng Flexbox.
Khám phá hộp linh hoạt CSS
Khi một phần tử HTML trên trang của bạn được áp dụng display: flex hoặc display: inline-flex, bạn có thể thấy huy hiệu flex bên cạnh phần tử đó trong bảng Phần tử.
Sửa đổi bố cục bằng trình chỉnh sửa hộp linh hoạt
Bạn có thể sửa đổi bố cục hộp linh hoạt một cách trực quan bằng trình chỉnh sửa hộp linh hoạt. Ví dụ: dưới đây là cách bạn có thể căn giữa văn bản <h1> của trang minh hoạ này trong vùng chứa <div class="container">.
- Kiểm tra phần tử vùng chứa.
- Trong ngăn Styles (Kiểu), bạn có thể thấy nút flexbox editor (Trình chỉnh sửa flexbox) bên cạnh phần khai báo
display: flex.
- Nhấp vào đó để mở trình chỉnh sửa hộp linh hoạt. Trình chỉnh sửa này sẽ hiện danh sách các thuộc tính hộp linh hoạt. Các lựa chọn về giá trị của mỗi thuộc tính được hiển thị dưới dạng nút biểu tượng.
- Để căn giữa văn bản trên màn hình, bạn có thể nhấp vào nút
justify-content: centervàalign-items: center.
- Văn bản hiện được căn giữa. Lưu ý rằng phần khai báo
justify-content: centervàalign-items: centersẽ được thêm vào ngăn Styles (Kiểu).
Kiểm tra bố cục hộp linh hoạt
Bạn có thể di chuột qua phần tử hộp linh hoạt trong bảng điều khiển Phần tử để hình ảnh bố cục. Lớp phủ này sẽ xuất hiện trên phần tử, được bố trí bằng các đường chấm để cho thấy vị trí của nội dung và các mục trong đó.
Hoặc, bạn có thể nhấp vào huy hiệu để bật/tắt chế độ hiển thị của lớp phủ hộp linh hoạt.
Hãy thử thay đổi giá trị thành justify-content: flex-end. Lớp phủ này cũng sẽ thay đổi theo.
Các biểu tượng trong trình chỉnh sửa linh hoạt có khả năng nhận biết theo bối cảnh. Hướng bố cục sẽ thay đổi theo hướng bố cục. Ví dụ: khi bạn thay đổi flex-direction thành column, các biểu tượng trong trình chỉnh sửa linh hoạt sẽ được xoay tương ứng. Lớp phủ cũng được cập nhật ngay lập tức.
Điều chỉnh màu của lớp phủ Flexbox
Mở ngăn Layout (Bố cục) rồi di chuyển xuống mục Flexbox. Bạn có thể xem tất cả thành phần hộp linh hoạt của trang này tại đây.
Bạn có thể bật/tắt lớp phủ của từng phần tử trong hộp linh hoạt bằng hộp đánh dấu bên cạnh. Việc này giống như khi bạn nhấp vào badge trong cây DOM.
Ngoài ra, bạn có thể thay đổi màu của lớp phủ bằng cách nhấp vào biểu tượng màu bên cạnh lớp phủ đó. Ví dụ: màu của lớp phủ container được thay đổi thành màu đen.
Để điều hướng đến một phần tử hộp linh hoạt trong cây DOM, bạn có thể nhấp vào biểu tượng bộ chọn bên cạnh phần tử đó.