Hướng dẫn này trình bày 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 Thành phần.
Ảnh chụp màn hình trong bài viết này là trên trang web sau: Căn giữa phần tử văn bản bằng Flexbox.
Khám phá CSS flexbox
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 một huy hiệu flex bên cạnh phần tử đó trong bảng điều khiển Thành phần.
Sửa đổi bố cục bằng trình chỉnh sửa flexbox
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ụ: đâ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 hộp linh hoạt) bên cạnh nội dung 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 sẽ hiển thị danh sách các thuộc tính flexbox. Các tuỳ chọn giá trị của mỗi thuộc tính được hiển thị dưới dạng các 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 các phần khai báo
justify-content: centervàalign-items: centerđược thêm vào ngăn Styles (Kiểu).
Kiểm tra bố cục flexbox
Bạn có thể di chuột qua phần tử hộp linh hoạt trong bảng điều khiển Thành phần để hình ảnh hoá bố cục. Lớp phủ này xuất hiện trên phần tử, được bố trí bằng các đường chấm để cho biết vị trí của nội dung và các mục.
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ủ cũng được thay đổi tương ứng.
Các biểu tượng trong trình chỉnh sửa linh hoạt nhận biết theo ngữ cảnh. Nó 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 lớp phủ flexbox
Mở ngăn Layout (Bố cục) rồi cuộn xuống phần Flexbox. Bạn có thể xem tất cả các phần tử flexbox của trang tại đây.
Bạn có thể bật/tắt lớp phủ của từng phần tử flexbox bằng hộp đánh dấu bên cạnh. Thao tác này cũng tương tự 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. Ví dụ: màu của lớp phủ container chuyển thành màu đen.
Để chuyển đế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ử đó.