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

다양한 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에서 더 많은 정보를 확인할 수 있음