플렉스박스
Flexbox
상자들을 한 줄(가로 또는 세로)로 나란히 늘어놓는 배치 방법이에요.
💡 책꽂이에 책을 한 줄로 꽂는 방식이에요.
👆 직접 눌러 보기
진짜로 동작해요. 눌러 보고 움직여 보세요.
A
B
C
CSSdisplay: flex; flex-direction: row; justify-content: space-between;
🤖 AI에게 이렇게 말해 보세요
헤더를 플렉스박스(Flexbox)로 만들어서 로고는 왼쪽 끝, 메뉴는 오른쪽 끝에 두고(space-between) 세로 가운데로 맞춰 줘.
핵심은 ‘Flexbox’라는 단어예요. 이 단어를 넣으면 AI가 훨씬 정확하게 알아들어요.
📌 알아 두면 좋아요
한 줄 배치는 Flexbox, 바둑판 배치는 Grid라고 기억하면 쉬워요.
이럴 때 써요
- 메뉴를 가로로 나란히
- 로고는 왼쪽, 버튼은 오른쪽으로 양 끝 배치
이렇게도 불러요: 플렉스, flex, 가로 배치, 나란히, 한 줄로, 양쪽 끝, space-between