▲

GN⁺: HN 공개: CSS Flexbox 어려움 해결을 위한 Playground

 (yoavsbg.github.io)
2P by neo 2달전 | ★ favorite | 댓글 1개

  • 다양한 flex 속성을 실험하여 레이아웃에 미치는 영향을 이해할 수 있는 도구

  • 실시간으로 변화를 확인하고 생성된 CSS 코드를 복사할 수 있음

  • flex-direction

    • row: 요소를 가로 방향으로 배치함
    • column: 요소를 세로 방향으로 배치함
    • row-reverse: 요소를 가로 방향으로 역순 배치함
    • column-reverse: 요소를 세로 방향으로 역순 배치함

  • justify-content

    • flex-start: 요소를 시작점에 정렬함
    • center: 요소를 중앙에 정렬함
    • flex-end: 요소를 끝점에 정렬함
    • space-between: 요소 사이에 균등한 간격을 둠
    • space-around: 요소 주위에 균등한 간격을 둠

  • align-items

    • stretch: 요소를 늘려서 정렬함
    • flex-start: 요소를 시작점에 정렬함
    • center: 요소를 중앙에 정렬함
    • flex-end: 요소를 끝점에 정렬함
    • baseline: 요소를 기준선에 정렬함

  • flex-wrap

    • nowrap: 요소를 한 줄에 배치함
    • wrap: 요소를 여러 줄에 걸쳐 배치함
    • wrap-reverse: 요소를 역순으로 여러 줄에 걸쳐 배치함

  • 예제 코드

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

  • 제작자

    • Yoav Sabag에 의해 제작됨
    • YouTube, GitHub에서 더 많은 정보를 확인할 수 있음
▲
neo 2달전  [-]
Hacker News 의견

  • Flexbox는 간단하고 이해하기 쉬운 면이 있지만, 속성과 값의 이름이 직관적이지 않음

    • justify-content와 align-items 같은 이름이 혼란을 줌
    • Flexbox를 배우기 위해 여러 시도를 해야 함

  • Flexboxfroggy.com과 cssgridgarden.com을 추천함

    • 이 사이트들은 Flexbox와 CSS Grid를 배우는 데 유용함

  • Josh의 가이드를 추천함

    • Flexbox의 고급 팁과 트릭을 상세히 설명함
    • flex-basis, auto margins, min-width 등의 개념을 다룸

  • 비슷한 인터랙티브 가이드를 만든 경험을 공유함

    • 기억을 새롭게 하는 데 도움이 됨

  • justify-content와 align-items 대신 main-axis-arrangement와 cross-axis-alignment가 더 이해하기 쉬운 이름이라고 주장함

  • Flexbox를 제대로 사용하기 어려움을 토로함

    • Flexboxfroggy.com도 도움이 되지 않았다고 언급함

  • CSS 레이아웃을 연습할 수 있는 흥미로운 도전 과제가 필요함

    • ChatGPT가 CSS 디버깅에 도움이 되지만, CSS의 깊은 이해가 필요함

  • Flexbox와 Grid의 문법이 설명적이라고 생각함

    • 박스 모델을 이해하고 Firefox Dev Tools를 사용하면 도움이 됨
    • Flexboxfroggy와 cssgridgarden이 연습에 유용함
    • CSS-tricks 치트시트를 자주 참고함

  • Flexbox의 자식 항목 속성도 중요하다고 언급함

    • 네 가지 컨테이너 속성만 다루는 것은 제한적임

  • Flexbox 속성을 참조할 수 있는 치트시트를 만들었음

    • 다른 사람들에게도 유용할 수 있음
답변달기