CSS
흐름·Flexbox·위치 지정
요소가 문서 흐름에 참여하는 방식과 자식 요소를 배치하는 방식은 서로 다른 규칙으로 동작합니다.
이럴 때 필요해요
긴 제목 때문에 옆 버튼이 화면 밖으로 밀려나거나 배지가 엉뚱한 위치에 붙는 레이아웃 버그를 원리대로 해결하기 위해 필요합니다.
어떻게 동작하나요?
카드 헤더에 제목과 삭제 버튼을 나란히 두었는데 제목이 길어지자 버튼이 찌그러지는 현상은 실무에서 자주 만나는 문제입니다. display 속성은 요소 바깥의 참여 방식(block, inline)과 안쪽 자식들의 배치 방식(flex, grid)을 정하며, display: flex를 주면 직계 자식들만 Flex 항목이 됩니다. 이때 Flex 항목은 기본적으로 자신의 콘텐츠 크기보다 작아지지 않으려는 성질(min-width: auto)이 있어서, 긴 텍스트가 공간을 양보하게 하려면 min-width: 0을 명시해 주어야 합니다.
요소를 원하는 자리에 고정하거나 띄울 때 쓰는 position은 기준점을 정확히 알아야 합니다. relative는 원래 문서 흐름의 자리를 그대로 유지한 채 자기 자신을 기준으로 이동하고, absolute는 일반 흐름에서 완전히 빠져나와 static이 아닌 가장 가까운 조상(포함 블록)을 기준으로 배치됩니다. fixed는 보통 화면 뷰포트에 고정되지만 조상에 transform이나 filter가 있으면 그 조상이 기준이 될 수 있으며, sticky는 스크롤 컨테이너 안에서 지정한 top 등의 임계 위치에 닿을 때만 고정됩니다.
float는 원래 기사 본문 안에서 이미지 옆으로 글자가 자연스럽게 흘러가도록 감싸기 위해 만들어진 속성입니다. 일반 블록 흐름에서 벗어나기 때문에 부모 박스가 float 자식의 높이를 인식하지 못할 수 있는데, 이때는 부모에 display: flow-root를 주어 새로운 블록 서식 맥락(BFC)을 만들면 깔끔하게 포함됩니다. 오늘날 카드 목록이나 페이지 전체의 행·열 배치는 float 대신 의도를 직접 드러내는 Flexbox나 Grid로 작성합니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
.toolbar { display: flex; gap: .75rem; }
.title { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.badge-wrap { position: relative; }
.badge { position: absolute; inset-block-start: 0; inset-inline-end: 0; }제목(.title)의 기본 최소 크기를 min-width: 0으로 풀어 긴 텍스트가 공간을 양보하게 만들고, 배지(.badge)는 position: relative가 지정된 조상(.badge-wrap)을 기준으로 오른쪽 위에 배치합니다.
자주 헷갈리는 포인트
- flex-direction이 column으로 바뀌면 주축도 세로가 되므로 justify-content를 언제나 가로 정렬이라고 외우면 안 됩니다.
- position: absolute의 배치 기준이 무조건 바로 위 부모 태그라고 가정하면 안 됩니다.
내 말로 설명해 보기
Flex 컨테이너 안에서 긴 제목 때문에 옆 버튼이 밀려날 때, flex-basis 외에 어떤 최소 크기 속성을 확인해야 할까요?
실전 시나리오에 적용해 보기
함께 읽으면 좋은 개념
관련 면접 질문 4개
Flexbox의 주축·교차축 정렬과 flex 항목의 크기 분배는 어떻게 동작하나요?
Flexbox는 flex-direction으로 정한 주축을 따라 항목을 배치하고 수직인 교차축을 함께 정렬하는 레이아웃 모델입니다. 주축 정렬은 justify-content가, 교차축 정렬은 align-items가 담당하며, 각 항목은 flex-basis를 시작 크기로 삼아 남는 공간을 flex-grow 비율로 나누거나 부족한 공간을 flex-shrink 비율로 줄입니다. 긴 텍스트 때문에 항목이 줄어들지 않는다면 항목의 기본 최소 크기(min-width: auto)를 0으로 풀어 주어야 합니다.
꼬리질문과 참고자료 →CSS의 float 속성은 일반 문서 흐름과 주변 텍스트 배치에 어떤 영향을 주나요?
float가 적용된 요소는 일반적인 블록 흐름에서 벗어나 부모 컨테이너의 왼쪽이나 오른쪽 끝으로 이동하고, 뒤따르는 텍스트와 인라인 요소들이 그 주변을 자연스럽게 감싸며 흐르게 만듭니다. 이때 일반 블록 흐름과 다른 배치 규칙을 따르기 때문에, float 요소만 있는 부모 박스는 자식의 높이를 인식하지 못해 높이가 0처럼 줄어들 수 있습니다. 이를 감싸려면 부모에 display: flow-root를 지정해 새로운 블록 서식 맥락(BFC)을 만들어 주는 방법이 깔끔합니다.
꼬리질문과 참고자료 →CSS position 속성값에 따라 요소의 배치 기준과 문서 흐름은 어떻게 달라지나요?
기본값인 static은 일반적인 문서 흐름을 따르고, relative는 원래 흐름상의 자리를 그대로 차지한 채 자기 자신을 기준으로 시각적 위치만 이동합니다. 반면 absolute는 일반 흐름에서 완전히 빠져나와 static이 아닌 가장 가까운 조상(포함 블록)을 기준으로 배치되며, fixed는 기본적으로 브라우저 뷰포트에 고정됩니다. sticky는 평소에는 일반 흐름에 있다가 스크롤 위치가 지정한 임계값(top 등)에 닿으면 스크롤 컨테이너 안에서 고정되는 하이브리드 방식입니다.
꼬리질문과 참고자료 →