⭐ 0
🔍
văn bản Hình ảnh PDF & Tài liệu Âm thanh Âm nhạc Điện tử Thời gian Tiện ích Trình xác nhận Huyền học Trò chơi

biện minh cho nội dung: khoảng trắng giữa Giải thích (CSS)

Xây dựng bố cục CSS flexbox một cách trực quan: flex-direction, right-content, căn chỉnh các mục, flex-wrap và khoảng cách trên vùng chứa, cùng với flex-grow, flex-shrink và flex-basis cho mỗi đứa trẻ, tất cả đều có bản xem trước trực tiếp và CSS có thể sao chép.

Đang xử lý... 0%

kết quả

Trang này mở trình tạo với nội dung hợp lý được đặt thành khoảng trắng ở giữa: hộp đầu tiên nằm phẳng với cạnh bắt đầu của vùng chứa, hộp cuối cùng nằm ngang với cạnh cuối của nó và khoảng trống còn lại được chia thành các khoảng trống bằng nhau giữa các hộp ở giữa — không bao giờ trước hộp đầu tiên hoặc sau hộp cuối cùng.

Đó là chi tiết mọi người nhầm lẫn. space-around mang lại cho mỗi hộp một lề bằng nhau ở cả hai cạnh của nó, do đó khoảng cách giữa các hộp sẽ rộng gấp đôi khoảng trống ở hai cạnh ngoài (mỗi cạnh chỉ có lề của một hộp chứ không phải hai). space-evenly còn đi xa hơn và làm cho mọi khoảng trống có cùng kích thước, bao gồm cả hai cạnh bên ngoài — cạnh duy nhất trong ba cạnh có khoảng cách trông hoàn toàn đồng đều trên mọi mặt.

Chuyển đổi danh sách thả xuống nội dung biện minh giữa ba giá trị bên dưới và xem ba hộp tương tự được sắp xếp lại — đó là cách nhanh nhất để thấy sự khác biệt thay vì ghi nhớ nó. Sao chép CSS cho bất kỳ cái nào phù hợp với khoảng cách bạn thực sự muốn.

🛡️
Thực hiện trong trình duyệt

Các tập tin và dữ liệu đầu vào của bạn sẽ không bao giờ rời khỏi thiết bị này. Quá trình xử lý chạy hoàn toàn ngoại tuyến. An toàn 100%.

Định dạng và quy tắc được chấp nhận

  • Các điều khiển vùng chứa: hướng flex, nội dung đều, căn chỉnh các mục, flex-wrap và đầu vào khoảng cách tính bằng pixel, được áp dụng trực tiếp cho bản xem trước.
  • Theo mặc định, ba hộp con được mã hóa màu (thêm tối đa tám, xóa xuống còn hai), mỗi hộp có các trường flex-grow, flex-shrink và flex-basis riêng.
  • Khối CSS có thể sao chép với quy tắc .flex-container cộng với một quy tắc .flex-item-N cho mỗi thành phần con có thuộc tính flex không mặc định.

Lợi ích chính

✓ Mọi điều khiển vùng chứa và flex-grow, flex-shrink và flex-basis của mỗi đứa trẻ đều cập nhật trực tiếp ba hộp xem trước được đánh số, để bạn biết chính xác những quy tắc flexbox của mình thực hiện trước khi chạm vào biểu định kiểu.
✓ Trình tạo chỉ in các quy tắc con thực sự khác với các giá trị mặc định của CSS, do đó, mã được sao chép vẫn ngắn và dễ đọc thay vì đặt lại flex-grow: 0 trên mỗi hộp.
✓ Các trang đặt trước giải quyết bố cục mà mọi người tìm kiếm theo tên: căn giữa div, thanh điều hướng bên trái liên kết bên phải logo và các cột linh hoạt có chiều rộng bằng nhau — mở một cột và công cụ đã được định cấu hình.

Trường hợp sử dụng

  • • Nhận CSS chính xác để căn giữa div theo cả chiều ngang và chiều dọc bằng cách xem các mục căn chỉnh và nội dung căn chỉnh hoạt động trên các hộp xem trước trực tiếp.
  • • Xây dựng bố cục thanh điều hướng logo bên trái, liên kết bên phải với khoảng trắng ở giữa và căn chỉnh các mục: ở giữa, sau đó sao chép CSS vùng chứa thẳng vào thành phần tiêu đề của bạn.
  • • So sánh space-between, space-around và space-evenly cạnh nhau trên cùng ba ô thay vì đoán xem ô nào khớp với khoảng cách bạn muốn.