CSS Flexbox 어려움 해결을 위한 Playground

 (yoavsbg.github.io)
2P by GN⁺ | ★ favorite | 댓글 1개
  • CSS Flexbox Playground는 Flexbox 속성을 실시간으로 바꿔 보며 레이아웃 변화를 확인하는 학습 도구임
  • 컨트롤을 조정하면 flex 설정이 화면 배치에 미치는 영향을 바로 비교할 수 있음
  • 기본 예시는 display: flex, flex-direction: row, justify-content: space-around, align-items: flex-start, flex-wrap: nowrap 조합으로 시작함
  • 화면의 1부터 5까지 항목이 설정 변경에 따라 움직여 레이아웃 결과를 눈으로 확인하기 쉬움
  • 생성된 CSS 코드를 복사할 수 있어 실험한 설정을 실제 코드에 옮기기 좋음

실시간 Flexbox 실험 도구

  • CSS Flexbox Playground는 Flexbox 속성을 배우고 실험하기 위한 인터랙티브 도구임
  • 컨트롤을 조정하면 레이아웃 변화가 실시간으로 반영됨
  • 실험 결과로 생성된 CSS 코드를 복사할 수 있음

기본 예시 설정

  • 예시 .container 설정은 다음 CSS를 사용함
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: nowrap;
}
  • 화면에는 1, 2, 3, 4, 5 항목이 표시되어 Flexbox 배치 결과를 확인할 수 있음

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • Flexbox 자체는 단순하고 이치에 맞지만, 속성과 값 이름이 위원회식으로 정해져서 직관적이지 않음
    justify-content와 align-items 중 뭐가 뭔지 기억하려다 결국 포기하고, 될 때까지 이것저것 바꿔보게 됨

    • CSS-Tricks Flexbox 가이드 https://css-tricks.com/snippets/css/a-guide-to-flexbox/를 매번 보게 됨
      Grid용 비슷한 가이드도 있고 그쪽도 훌륭함
    • Flexbox에서 상자 안의 상자, 콘텐츠가 상자를 채울지 상자가 콘텐츠를 감쌀지에 필요한 설정을 도무지 외우기 어려움
      특히 SPA에서 상자들이 화면을 채우되 넘치지 않게 해야 할 때 중요함. 결국 여기저기 min-width: 0 같은 전혀 직관적이지 않은 설정을 넣고, 몇 가지를 더 만지다 보면 어떻게든 됨
      이 모든 걸 커버하는 CSS 클래스 몇 개를 만들 수 있을 것 같은데, 아직 모든 경우에 맞는 해법은 못 찾음
    • Chrome CSS 검사기에서 display: flex 규칙 옆 아이콘을 누르면 여러 Flexbox 속성이 아이콘으로 시각화되고, 클릭해서 바로 설정할 수 있음
      사실상 모든 페이지가 실험장이 됨
    • Tailwind가 이걸 더 헷갈리게 만든 게 인상적임
      justify-content: center는 justify-center, align-items: center는 items-center라니, 왜 이렇게 했는지 모르겠음
    • justify-content는 main-axis, align-items는 cross-axis라고 불렀어야 함
      이걸 이해하면 Flexbox 전체가 쉬워짐

  • 이미 많이 나왔지만, Flexbox Froggy https://flexboxfroggy.com/를 추천해 왔고 다른 사람들도 금방 익혔음
    CSS Grid를 배우기엔 https://cssgridgarden.com/도 좋음

    • cssgridgarden의 게임화가 마음에 듦
      아이들용에 가까운 https://www.codemonkey.com/와 비슷함
    • OP와 아주 비슷한 Flexbox 즐겨찾기 사이트로 https://flexbox.tech/가 있음
      Bootstrap 코드를 만들 때는 https://build.layoutit.com/가 유용하고, CSS Grid용으로는 https://grid.layoutit.com/가 있음. 다만 전자는 Bootstrap 5가 아니라 Bootstrap 4까지만 지원해서 아쉬움
    • flexboxfroggy를 써봤는데, 개념은 좋고 구현도 잘됐지만 문법 자동완성 부재가 꽤 거슬림

  • Josh의 가이드 https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/를 강력 추천함
    flex-basis, 자동 여백, min-width 같은 더 고급 함정과 팁을 자세히 다룸

    • 읽어본 것 중 최고 수준이었음
      Flexbox와 Tailwind CSS 구성 요소를 꽤 잘 안다고 생각했는데, 이 글이 이론적 기반에 대한 갈증을 잘 긁어줌

  • 좋은 플레이그라운드임
    몇 년 전에 끝부분에 비슷한 플레이그라운드를 넣은 인터랙티브 가이드를 만들었음: https://lik.ai/guides/an-interactive-guide-to-flexbox/
    가끔 기억을 되살릴 때 유용했음

  • 2025년이 됐고, 2년과 튜토리얼 3개가 지났지만 아직도 Flexbox를 제대로 못 씀
    https://flexboxfroggy.com/도 별 도움이 안 됐음

    • 몇 년간 Flexbox를 쓰고 나니, Flexbox는 USB-A 꽂기와 비슷하다는 걸 깨달음
      justify와 align은 첫 시도에서 항상 반대로 됨
    • 왜 이렇게 기억하기 어려운지 모르겠음
      CSS float 레이아웃을 포함해 온갖 건 몇 년씩 기억하는데, Flexbox는 몇 달 안 쓰면 80%를 잊어버리고 처음부터 다시 읽고 플레이그라운드에서 시간을 써야 함
      문제는 속성 이름이 너무 많고, 그중 상당수가 직관적이지 않거나 그냥 틀린 이름처럼 느껴진다는 것임. 차라리 한두 글자짜리 기호 이름을 붙였어도 비슷했을 듯함
    • flexboxfroggy는 알고 있지만, 읽고 쓰기보다 “놀면서” 배우는 쪽을 좋아해서 그 사이트는 유용하지 않았음
      이 도구가 도움이 되길 바라고, 빠진 게 있으면 알려주면 좋겠음

  • 왜 이 속성 이름을 justify-content, align-items라고 했을까
    main-axis-arrangement 와 cross-axis-alignment 가 더 말이 되지 않나

    • 설명은 있겠지만, 전반적으로 CSS 속성은 헷갈리고 직관적이지 않은 게 많음
      color, text-align, position: absolute와 position: fixed 같은 것도 그렇고, absolute도 기술적으로는 여전히 상대적임
    • 논의 차원에서 보면 이 이름은 Grid와 Flexbox 모두에 맞고, justify-items, justify-self와의 관례에도 맞아서 일관성은 있음
      그래도 align-content와는 아직도 헷갈림
    • grid-template 축약형이 y축을 먼저 쓰는 것도 헷갈림: y1 / x1 / y2 / x2
      게다가 0부터 시작하지도 않아서 항상 잊어버림
    • Google이 LLM으로 Encanto 2 스포일러를 말해주는 데 너무 집중해서 검색 능력이 퇴화한 건지, 아니면 이런 Tailwind 플러그인이 아직 없다는 데 놀라는 게 정당한 건지 모르겠음
      cross-axis-center를 align-items: center로, main-axis-between을 justify-content: space-between으로 매핑하는 식의 Tailwind 별칭 플러그인은 금방 만들 수 있음
    • “내 언어에서 텍스트를 justify하는 건 가로 방향”이라는 기억법을 써서 헷갈리지 않았음
      물론 바꿀 수는 있지만, Flexbox 기본 동작은 이 기억법으로 커버됨

  • Flexbox를 배울 때 속성을 찾아보려고 치트시트를 만들었음
    다른 사람에게도 유용할 수 있음: https://darekkay.com/flexbox-cheatsheet/

    • 선택하지 않아도 효과가 바로 보여서 좋고, MDN 링크가 붙어 있는 점도 마음에 듦

  • 빠르게 보는 시각적 치트시트로는 좋지만, 결국 프로젝트 곳곳에서 써봐야 몸에 익는다고 봄
    문법은 대체로 스스로 설명되는 편이지만 row와 column은 예외임
    Flexbox나 Grid 대부분에서 크게 헤맨 적은 없지만, 사람들이 많이 헷갈려하는 건 보임. 박스 모델을 이해하고 Firefox 개발자 도구를 쓰면 Flexbox 모델을 배울 때 큰 도움이 됨. 컨테이너를 꽤 잘 시각화해 주고, 이제 Chrome 개발자 도구도 비슷하게 되는 듯함
    flexboxfroggy와 cssgridgarden도 연습에 유용했음. 그래도 문법을 보려고 매번 CSS-Tricks 치트시트를 열고, row인지 column인지는 첫 시도에 절대 못 맞힘

    • Chrome/Edge에는 Firefox에는 없는 것 같은 좋은 기능이 있음
      Flex 모드 전환을 빠르게 토글할 수 있음 https://imgur.com/a/17iy1eN

  • 이 도구는 컨테이너 속성 4개만 다뤄서 너무 제한적으로 보임
    Flexbox에서 꽤 중요한 자식 항목 속성은 완전히 빠져 있음

  • CSS 레이아웃을 연습할 수 있는 흥미로운 과제 모음이 있으면 좋겠음
    잘 작성된 해설과 설명, 그리고 “왜 이 코드 조각이 원하는 레이아웃을 만들지 못하는가” 같은 디버깅 과제도 있으면 좋을 듯함
    CSS 문제 디버깅에는 ChatGPT가 꽤 도움이 됐음. 항상 맞지는 않지만 대체로 올바른 방향을 잡아줌. 그래도 CSS가 실제로 어떻게 작동하는지 더 깊게 이해하고 싶음. 책과 튜토리얼도 읽었고 결국 규칙의 집합이라는 건 알지만, 정확히 적용하는 건 어렵다

    • 나도 비슷하게 Claude를 씀
      CSS를 고쳐서 원하는 모양이 되게 다시 작성해 달라고 자주 묻고, 문서를 뒤지는 것보다 훨씬 빠르게 해줌
답변달기