⭐ 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

Thanh điều hướng CSS Flexbox — Logo bên trái, liên kết bên phải

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ở cài đặt trước trình tạo flexbox cho bố cục thanh điều hướng cổ điển: nội dung căn đều được đặt thành khoảng trắng ở giữa và căn chỉnh các mục được đặt ở giữa. Đặt logo vào hộp đầu tiên và một hàng liên kết điều hướng trong hộp cuối cùng (hoặc chia các liên kết qua các hộp ở giữa) và hộp chứa flexbox sẽ đẩy chúng đến các đầu đối diện của thanh trong khi vẫn giữ mọi mục được xếp trên cùng một tâm dọc, bất kể logo hoặc văn bản liên kết cao bao nhiêu.

space-between là yếu tố giúp tính năng này hoạt động: nó ghim con đầu tiên vào cạnh bắt đầu và con cuối cùng vào cạnh cuối, sau đó trải đều mọi con còn lại giữa chúng - chính xác là hình dạng logo bên trái, liên kết phải mà hầu hết mọi tiêu đề trang web đều sử dụng. Align-items: center sau đó sẽ giải quyết vấn đề căn chỉnh theo chiều dọc vốn thường cần đến các thủ thuật về chiều cao dòng hoặc thủ thuật hiển thị ô trong bảng.

Điều chỉnh số lượng con để khớp với thanh điều hướng thực của bạn — hai hộp dành cho thanh biểu tượng và CTA trần, nhiều hộp hơn cho biểu tượng cùng với một số liên kết — và xem bố cục điều chỉnh trực tiếp. Sao chép khối CSS sau khi nó khớp với tiêu đề của bạn hoặc mở khoảng trắng ở giữa đặt trước nếu bạn muốn xem một thuộc tính đó được so sánh với các thuộc tính gần gũi của 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.