flex가 적용되면 하위에 있는 인라인의 속성은?

인프런 커뮤니티 질문&답변

서병식

작성한 질문수

플렉스(Flex) 반응형 웹사이트 포트폴리오(The World's Best Cities)

[응용 예제] 반응형 헤더영역(로고, 검색, 네비게이션)

작성

290

'반응형 헤더영역'을 다시 보는 중이었는데요.
.gnb a 에 상하마진이 먹히는걸 보면서. 어? a태그는 인라인인데 왜 상하마진이 먹힘?
그래서 제가 이것저것 테스트를 해 봤더니.
flex가 적용되면 하위에 있던 인라인 요소들은 자동적으로 인라인블록으로 변하는 것 같습니다.
포지션 속성을 주면 인라인블록으로 변하는 것 처럼요.

flex 반응형-웹

답변 1

코딩웍스(Coding Works)

지식공유자

잘 보셨습니다.

플렉스를 선언하면 자식요소(자손요소 아님)는 모든 요소가 무조건 마진이 없는 인라인 블록이 됩니다.
인라인 블록은 우측에 폰트 관련 마진이 5픽셀 정도 생깁니다. 하지만 플렉스 자식요소 인라인 블록은 우측에 폰트 관련 마진이 생기지 않습니다. float를 준 것과 동일합니다. 다만 float의 경우 자식요소가 float가 되면 부모요소가 높이 값을 잃게 되어 찾아주어야 합니다. 그리고 보더와 패딩 값까지 생각해서 box-sizing: border-box 도 주어야 합니다.

이런 모든 것들을 하지 않아도 되게 하는게 플렉스입니다.

서병식

작성한 질문수

전체 Q&A

질문하기