Playground giúp giải quyết khó khăn với CSS Flexbox

 (yoavsbg.github.io)
2 điểm bởi GN⁺ 2025-01-06 | 1 bình luận | Chia sẻ qua WhatsApp
  • CSS Flexbox Playground là công cụ học tập cho phép thay đổi các thuộc tính Flexbox theo thời gian thực và xem sự thay đổi của layout
  • Khi điều chỉnh các control, bạn có thể so sánh ngay tác động của thiết lập flex lên cách bố trí trên màn hình
  • Ví dụ mặc định bắt đầu với tổ hợp display: flex, flex-direction: row, justify-content: space-around, align-items: flex-start, flex-wrap: nowrap
  • Các mục từ 1 đến 5 trên màn hình di chuyển theo thay đổi thiết lập, giúp dễ dàng quan sát kết quả layout bằng mắt
  • Có thể sao chép mã CSS được tạo ra, thuận tiện để đưa các thiết lập đã thử nghiệm vào mã thực tế

Công cụ thử nghiệm Flexbox theo thời gian thực

  • CSS Flexbox Playground là công cụ tương tác để học và thử nghiệm các thuộc tính Flexbox
  • Khi điều chỉnh các control, thay đổi layout được phản ánh theo thời gian thực
  • Có thể sao chép mã CSS được tạo ra từ kết quả thử nghiệm

Thiết lập ví dụ mặc định

  • Thiết lập .container trong ví dụ sử dụng CSS sau
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: nowrap;
}
  • Trên màn hình hiển thị các mục 1, 2, 3, 4, 5, cho phép kiểm tra kết quả bố trí bằng Flexbox

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-01-06
Ý kiến trên Hacker News

  • Bản thân Flexbox thì đơn giản và hợp lý, nhưng tên thuộc tính và giá trị lại được đặt theo kiểu ủy ban nên không trực quan
    Cố nhớ xem justify-content và align-items cái nào là cái nào rồi cuối cùng đành bỏ cuộc, cứ đổi qua đổi lại đủ thứ cho đến khi chạy được

    • Cuối cùng lúc nào cũng phải mở lại hướng dẫn Flexbox của CSS-Tricks https://css-tricks.com/snippets/css/a-guide-to-flexbox/
      Cũng có một hướng dẫn tương tự cho Grid và bên đó cũng rất xuất sắc
    • Trong Flexbox, cực khó để nhớ các thiết lập cần thiết cho chuyện hộp trong hộp, nội dung sẽ lấp đầy hộp hay hộp sẽ ôm lấy nội dung
      Điều này đặc biệt quan trọng khi trong SPA cần các hộp lấp đầy màn hình nhưng không bị tràn. Kết cục là lại chèn những thiết lập hoàn toàn không trực quan như min-width: 0 vào đủ chỗ, chỉnh thêm vài thứ nữa rồi cuối cùng cũng ra somehow
      Có cảm giác có thể tạo ra vài lớp CSS để bao trùm hết mấy trường hợp này, nhưng vẫn chưa tìm được lời giải phù hợp cho mọi tình huống
    • Trong trình kiểm tra CSS của Chrome, nếu bấm vào biểu tượng cạnh quy tắc display: flex thì nhiều thuộc tính Flexbox sẽ được trực quan hóa bằng biểu tượng, và có thể bấm để thiết lập ngay
      Gần như mọi trang đều trở thành sân thử nghiệm
    • Thật ấn tượng khi Tailwind còn làm chuyện này rối hơn nữa
      justify-content: center thì là justify-center, còn align-items: center lại là items-center, không hiểu vì sao họ làm vậy
    • Lẽ ra justify-content nên được gọi là main-axis, còn align-items là cross-axis
      Hiểu được điều này thì toàn bộ Flexbox sẽ dễ hơn nhiều

  • Dù đã được nhắc nhiều rồi, tôi vẫn luôn khuyên dùng Flexbox Froggy https://flexboxfroggy.com/ và những người khác cũng học rất nhanh
    Để học CSS Grid thì https://cssgridgarden.com/ cũng rất tốt

    • Tôi thích tính trò chơi hóa của cssgridgarden
      Nó hơi giống https://www.codemonkey.com/ vốn thiên về trẻ em hơn
    • Có https://flexbox.tech/ là một trang bookmark về Flexbox khá giống với OP
      Khi tạo mã Bootstrap thì https://build.layoutit.com/ hữu ích, còn cho CSS Grid thì có https://grid.layoutit.com/ . Tuy nhiên hơi tiếc là cái đầu chỉ hỗ trợ đến Bootstrap 4 chứ không phải Bootstrap 5
    • Tôi đã dùng flexboxfroggy, ý tưởng hay và triển khai cũng tốt, nhưng việc thiếu tự động hoàn thành cú pháp khá gây khó chịu

  • Rất khuyến nghị hướng dẫn của Josh https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
    Nó đi sâu vào các bẫy và mẹo nâng cao hơn như flex-basis, lề tự động, min-width

    • Đây là một trong những bài tôi từng đọc hay nhất
      Tôi cứ nghĩ mình đã hiểu khá rõ Flexbox và các thành phần Tailwind CSS, nhưng bài này giải tỏa rất đúng cơn khát về nền tảng lý thuyết

  • Đây là một playground tốt
    Vài năm trước tôi cũng từng làm một hướng dẫn tương tác có chèn playground tương tự ở phần cuối: https://lik.ai/guides/an-interactive-guide-to-flexbox/
    Thỉnh thoảng nó khá hữu ích để gợi lại trí nhớ

  • Đã là năm 2025, đã qua 2 năm và 3 tutorial nhưng tôi vẫn chưa dùng Flexbox cho ra hồn
    https://flexboxfroggy.com/ cũng không giúp được bao nhiêu

    • Sau vài năm dùng Flexbox, tôi nhận ra nó giống như cắm USB-A
      justify và align lúc nào cũng bị ngược trong lần thử đầu tiên
    • Tôi không hiểu vì sao nó lại khó nhớ đến vậy
      Tôi có thể nhớ đủ thứ trong nhiều năm, kể cả layout bằng CSS float, nhưng với Flexbox thì chỉ cần vài tháng không dùng là quên mất 80%, lại phải đọc từ đầu và tốn thời gian trong playground
      Vấn đề là có quá nhiều tên thuộc tính, mà khá nhiều trong số đó không trực quan hoặc thậm chí nghe như đặt sai tên. Có khi đặt bằng ký hiệu một hai chữ còn cũng chẳng khác mấy
    • Tôi biết flexboxfroggy, nhưng tôi thích học bằng cách “nghịch” hơn là đọc và viết, nên trang đó không hữu ích với tôi
      Hy vọng công cụ này sẽ giúp được, và nếu còn thiếu gì thì mong mọi người cho biết

  • Tại sao lại đặt tên thuộc tính là justify-content và align-items nhỉ?
    main-axis-arrangement và cross-axis-alignment chẳng phải hợp lý hơn sao?

    • Có thể có giải thích, nhưng nhìn chung nhiều thuộc tính CSS khá rối và không trực quan
      color, text-align, position: absolute và position: fixed cũng vậy, mà absolute về mặt kỹ thuật thì vẫn là tương đối
    • Nếu xét ở góc độ thảo luận, các tên này phù hợp cho cả Grid lẫn Flexbox, và cũng khớp với quy ước như justify-items, justify-self, nên vẫn có tính nhất quán
      Nhưng dù vậy, align-content vẫn rất dễ gây nhầm lẫn
    • Việc dạng rút gọn grid-template ghi trục y trước cũng gây rối: y1 / x1 / y2 / x2
      Thêm nữa là nó cũng không bắt đầu từ 0, nên lúc nào cũng quên
    • Không rõ là do Google quá mải mê dùng LLM để spoil Encanto 2 nên khả năng tìm kiếm đã xuống cấp, hay là việc ngạc nhiên vì chưa có plugin Tailwind kiểu này là hoàn toàn chính đáng
      Có thể làm rất nhanh một plugin bí danh cho Tailwind kiểu ánh xạ cross-axis-center thành align-items: center, và main-axis-between thành justify-content: space-between
    • Tôi chưa bị nhầm vì dùng mẹo nhớ kiểu “trong ngôn ngữ của tôi, justify văn bản là theo chiều ngang”
      Tất nhiên có thể thay đổi được, nhưng hành vi mặc định của Flexbox thì mẹo này vẫn đủ dùng

  • Khi học Flexbox, tôi đã làm một cheat sheet để tra thuộc tính
    Có thể cũng hữu ích cho người khác: https://darekkay.com/flexbox-cheatsheet/

    • Hay ở chỗ là không cần chọn gì cũng thấy hiệu ứng ngay, và tôi cũng thích việc có kèm liên kết MDN

  • Dùng như một cheat sheet trực quan để xem nhanh thì tốt, nhưng rốt cuộc vẫn phải dùng khắp các dự án thì mới ngấm được
    Cú pháp nhìn chung khá tự giải thích, nhưng row và column là ngoại lệ
    Tôi chưa từng vật lộn quá nhiều với phần lớn Flexbox hay Grid, nhưng có thể thấy nhiều người rất hay nhầm. Hiểu box model và dùng Firefox DevTools sẽ giúp rất nhiều khi học mô hình Flexbox. Nó trực quan hóa container khá tốt, và giờ có vẻ Chrome DevTools cũng làm được tương tự.
    flexboxfroggy và cssgridgarden cũng hữu ích để luyện tập. Dù vậy, mỗi lần cần xem cú pháp tôi vẫn phải mở cheat sheet của CSS-Tricks, và row hay column thì chưa bao giờ đoán đúng ngay lần đầu

    • Chrome/Edge có một tính năng hay mà hình như Firefox không có
      Có thể bật tắt nhanh chế độ Flex https://imgur.com/a/17iy1eN

  • Công cụ này có vẻ quá hạn chế vì chỉ xử lý 4 thuộc tính của container
    Các thuộc tính của phần tử con vốn khá quan trọng trong Flexbox thì lại bị bỏ qua hoàn toàn

  • Sẽ rất hay nếu có một bộ bài tập thú vị để luyện CSS layout
    Sẽ càng tốt hơn nếu có phần giải thích, chú giải được viết kỹ, và cả những bài tập gỡ lỗi kiểu như “vì sao đoạn mã này không tạo ra layout như mong muốn”
    ChatGPT đã giúp khá nhiều trong việc debug các vấn đề CSS. Không phải lúc nào cũng đúng, nhưng nhìn chung nó chỉ ra đúng hướng. Dù vậy, tôi vẫn muốn hiểu sâu hơn CSS thực sự hoạt động thế nào. Tôi cũng đã đọc sách và tutorial, và biết rốt cuộc nó là một tập hợp các quy tắc, nhưng việc áp dụng thật chính xác thì khó.

    • Tôi cũng dùng Claude theo cách tương tự
      Tôi thường nhờ nó sửa lại CSS để cho ra hình dạng mình muốn, và nó nhanh hơn nhiều so với việc lục lọi tài liệu