CSS
Flexbox로 요소 나란히 놓기
부모에 display: flex를 주면 자식 요소를 한 축으로 배치할 수 있습니다.
이럴 때 필요해요
버튼 두 개를 나란히 놓고 일정한 간격을 만듭니다.
어떻게 동작하나요?
일반적인 블록 요소는 위에서 아래로 쌓입니다. 자식들을 나란히 배치하려면 이들을 감싸는 부모에 display: flex를 줍니다.
기본 flex-direction은 row입니다. gap은 자식 사이 간격을 정합니다. 버튼마다 여백을 따로 계산하는 대신 부모에서 간격을 관리할 수 있습니다.
flex-wrap: wrap을 지정하면 공간이 부족할 때 여러 줄로 넘어갈 수 있습니다. 가로·세로 정렬과 Grid 비교는 레이아웃 원리 노트에서 이어갑니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
<style>
.actions { display: flex; flex-wrap: wrap; gap: 16px; }
</style>
<div class="actions">
<button>이전</button><button>다음</button>
</div>actions 부모가 버튼 두 개의 배치와 사이 간격을 관리합니다.
자주 헷갈리는 포인트
- display: flex는 배치할 자식이 아니라 그 부모에 지정합니다.
- 모든 자식 너비를 고정하면 작은 화면에서 넘칠 수 있습니다.
내 말로 설명해 보기
버튼을 세로로 쌓으려면 어떤 설정을 추가할까요?
생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.
예시 답변 확인
설명에 들어갈 핵심
- 부모에 display: flex를 주면 자식 요소를 한 축으로 배치할 수 있습니다.
- actions 부모가 버튼 두 개의 배치와 사이 간격을 관리합니다.
예시 답변
부모에 flex-direction: column을 추가합니다. gap은 자식 사이 간격으로 계속 동작합니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.