[CSS] display: flex 사용시 자식의 영역을 width로 갖는 법

display: flex;가 선언된 태그는 자식들의 영역이 아닌 부모의 영역을 width로 갖게 된다.

 

예시

<div class="container">
  <div class="test-list">
    <a href="/">1</a>
    <a href="/">2</a>
    <a href="/">3</a>
    <a href="/">4</a>
    <a href="/">5</a>
    <a href="/">6</a>
    <a href="/">7</a>
    <a href="/">8</a>
    <a href="/">9</a>
    <a href="/">10</a>
  </div>
</div>

.container {
  width: 320px;
}

.test-list {
  display: flex;
  align-items: center;
}

a {
  width: 50px;
}

 

위 코드의 경우 display: flex;가 선언된 .test-list는 width 값이 부모인 .container의 width인 320px을 width로 가진다.

a태그가 자기 영역을 온전히 차지할 수 있도록 a태그에 flex-shrink: 0;을 붙여줘도 .test-list의 width는 여전히 320px이다.

 

그렇다면 .test-list가 flex의 기능을 수행하면서 자식의 width를 자신의 width로 가질 수 있는 방법은 뭘까?

방법은 2가지가 있다.  (출처: 김버그의 UI 개발 부트캠프 - 경력같은 신입으로 레벨업)

 

1. display: inline-flex + white-space: nowrap

.test-list에 display: flex; 대신 dispaly: inline-flex;와 white-space: nowrap;을 함께 선언해준다.

.container {
  width: 320px;
}

.test-list {
  display: inline-flex; // display: flex; 에서 변경
  align-items: center;
  white-space: nowrap; // 추가
}

a {
  width: 50px;
}

 

display: inline-flex

• flex처럼 배치를 돕는 속성
• display: inline;의 특성을 가지고 있어 자신의 영역만을 가지고 글자처럼 배치됨

 

white-space: nowrap

• white-space는 공백 문자를 처리하는 속성
• nowrap: 연속 공백을 하나로 합쳐 줄바꿈이 일어나지 않도록 함

 

 

요약하면,

 

1. display: inline-flex는 a태그(자식요소)들을 옆으로 나열시키고 문자화 한다.
2. 문자처럼 처리된 a태그에 white-space: nowrap를 사용하여 줄바꿈이 일어나지 않도록 한다.
3. inline-flex는 inline처럼 자기 자신의 영역만을 인지하기 때문에 .test-list는 자식요소의 영역을 width로 가지게 된다.

 

 

여기서 질문,

Q. inline요소는 개행이나 공백을 width로 포함해서 인지하는데,  inline(inline-block)의 성질을 가진 inline-flex 또한 개행, 공백을 width로 인지하지는 않을까?

A. display: inline-flex는 개행 또는 공백을 width로 인정하지 않는다.

 

(평소 개행이나 공백을 width로 인지하는 성질 때문에 시안과 동일한 width를 다루기 쉽지 않아서 inline 또는 inline-block 사용을 선호하지 않았다. inline(inline-block) 요소의 부모에게 font-size를 0으로 만들고 필요한 요소에 font-size를 주면 되지만, 공통으로 지정된 font-size가 시시때때로 변하는 것을 선호하지 않아 피치못할 상황이 아니라면 inline요소로 된 a태그, img 태그, span 태그를 display: block으로 바꿔서 작업을 했다. 같은 이유로 flexbox를 사용하게 되면 display: flex만 사용했다... inline의 성질을 가진다는 얕은 지식으로 inline-flex를 기피했던 본인을 반성하며 메모!)

 

 

2. width: max-content

.test-list의 width를 max-content로 설정한다.

.container {
  width: 320px;
}

.test-list {
  display: flex;
  align-items: center;
  width: max-content; // 추가
}

a {
  width: 50px;
}​

 

width: max-content

• max-content: 자기 영역만큼을 width로 가짐
• min-content: 자동 개행을 사용하여 자기자신이 가질 수 있는 최소 너비
• fit-content: max-content와 min-content 성질을 유동적으로 가짐. 자기 영역을 온전히 보존할 수 있으면 max-content의 성질을, 자기 영역을 보존할 수 없으면 min-content만큼 width를 가짐. min-content 보다 적은 width로 줄어들지는 않음
• 익스플로러를 포함하여 구버전의 다수 브라우저들은 호환되지 않음

 

* .container의 width를 줄여보면서 테스트해보면 차이를 쉽게 알 수 있다.

See the Pen Untitled by Seonu (@parkseonup) on CodePen.

 

width: max-content; 한 줄로 손쉽게 자기자신이 가진 요소들의 너비를 width로 가질 수 있지만 호환성이 낮아서 아직은 사용하기가 어려운 듯하다..