HN công khai: Playground để giải quyết khó khăn khi dùng CSS Flexbox

 (yoavsbg.github.io)
2 điểm bởi GN⁺ 2025-01-06 | 1 bình luận | Chia sẻ qua WhatsApp

  • Công cụ cho phép thử nghiệm nhiều thuộc tính flex khác nhau để hiểu ảnh hưởng của chúng đến bố cục

  • Có thể theo dõi thay đổi theo thời gian thực và sao chép mã CSS đã tạo

  • flex-direction

    • row: sắp xếp các phần tử theo chiều ngang
    • column: sắp xếp các phần tử theo chiều dọc
    • row-reverse: sắp xếp các phần tử theo chiều ngang theo thứ tự ngược
    • column-reverse: sắp xếp các phần tử theo chiều dọc theo thứ tự ngược

  • justify-content

    • flex-start: canh lề các phần tử về điểm bắt đầu
    • center: canh giữa các phần tử
    • flex-end: canh lề các phần tử về điểm cuối
    • space-between: đặt khoảng cách đều giữa các phần tử
    • space-around: đặt khoảng cách đều xung quanh các phần tử

  • align-items

    • stretch: kéo dãn các phần tử để canh chỉnh
    • flex-start: canh lề các phần tử về điểm bắt đầu
    • center: canh giữa các phần tử
    • flex-end: canh lề các phần tử về điểm cuối
    • baseline: canh các phần tử theo đường cơ sở

  • flex-wrap

    • nowrap: sắp xếp các phần tử trên một dòng
    • wrap: sắp xếp các phần tử trên nhiều dòng
    • wrap-reverse: sắp xếp các phần tử trên nhiều dòng theo thứ tự ngược

  • Mã ví dụ

    • .container { display: flex; flex-direction: row; justify-content: space-around; align-items: flex-start; flex-wrap: nowrap; }

  • Người tạo

    • Được tạo bởi Yoav Sabag
    • Có thể xem thêm thông tin trên YouTube và GitHub

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-01-06
Ý kiến của Hacker News

  • Flexbox tuy có ưu điểm đơn giản và dễ hiểu, nhưng tên các thuộc tính và giá trị không trực quan

    • Các tên như justify-content và align-items gây ra sự nhầm lẫn
    • Cần phải thử nhiều cách để học Flexbox

  • Đề xuất Flexboxfroggy.com và cssgridgarden.com

    • Các trang web này hữu ích cho việc học Flexbox và CSS Grid

  • Đề xuất hướng dẫn của Josh

    • Mô tả chi tiết các mẹo và thủ thuật nâng cao của Flexbox
    • Bao gồm các khái niệm như flex-basis, auto margins, min-width

  • Chia sẻ kinh nghiệm đã từng tạo một hướng dẫn tương tác tương tự

    • Giúp làm mới lại ký ức

  • Cho rằng các tên main-axis-arrangement và cross-axis-alignment thay cho justify-content và align-items dễ hiểu hơn

  • Than phiền rằng đã khó để sử dụng Flexbox một cách đúng đắn

    • Cũng nhắc đến việc Flexboxfroggy.com chưa giúp ích

  • Cần những thử thách thú vị để luyện tập bố cục CSS

    • ChatGPT có thể giúp gỡ lỗi CSS, nhưng cần có hiểu biết sâu về CSS

  • Coi cú pháp của Flexbox và Grid là rất trực quan

    • Hiểu được mô hình hộp và sử dụng Firefox Dev Tools là có ích
    • Flexboxfroggy và cssgridgarden rất hữu ích cho việc luyện tập
    • Sử dụng cheat sheet của CSS-tricks khá thường xuyên

  • Nhấn mạnh rằng thuộc tính của các phần tử con Flexbox cũng quan trọng

    • Chỉ xử lý bốn thuộc tính của container là chưa đủ

  • Đã tạo một cheat sheet để tra cứu thuộc tính Flexbox

    • Có thể hữu ích cho những người khác