웹 페이지를 구현하거나 프로젝트를 수행할 때 flex: 1; 이라는 속성을 간혹 볼 수가 있다.
flex: 1 의 속성은 무엇이고, 이를 통해서 어떤 UI를 나타낼 수 있는지 확인해 보자.

개요

flex 속성

font 속성은 font-size, font-weight 등을 한번에 나타낼 수 있는 축약형이다.

이처럼 flex도 flex-basis, flex-grow, flex-shrink 를 한 번에 쓸 수 있는 축약형 속성이다.
그럼 각각 어떤 의미를 가지는지 알아두어야 한다.

flex-basis

flex-basis 는 flex의 아이템 기본 크기를 결정해준다. 또한 뒤에 나올 flex-grow 와 flex-shrink 의 기준점이 되기도 한다.

flex-grow

flex-grow 는 기본값이 0이고, 0이상 숫자가 대입되면 그 상태로 유연한 속성을 가지게 된다.
또한, 위에 있는 flex-basis 를 기준으로 크기가 커질 수 있는 지에 대한 속성이다.
flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율이 된다.

flex-shrink

flex-shrink 는 기본값이 1이고, 0이상 숫자가 대입되면 그 상태로 유연한 속성을 가지게 된다.
또한, flex-grow와 반대값으로 위에 있는 flex-basis 를 기준으로 크기가 작아질 수 있는 지에 대한 속성이다.

요약

flex: 1; 은 위의 속성을 한번에 나타낼 수 있는 속성이고 다음을 뜻한다.

flex-basis: 0%
flex-grow: 1;
flex-shrink: 1;

flex-basis는 기본값이 0이고, flex-shrink 는 기본값이 1이다.
즉, flex: 1; 은 flex-grow: 1; 의 기능을 같고,
flex-basis 를 제외한 여백부분은 전부 채운다는 말이 된다.

응용

이제 아래와 같은 이미지를 구현해야한다고 가정해보자.

먼저 기본 구조 파악을 위한 HTML 코드부터 작성해보자.

  <div class="top-chat-nav">
    <button>
      <img src="..." alt="...">
    </button>
    <strong>애월읍 위니브 감귤농장</strong>
    <button>
      <img src="..." alt="...">
    </button>
  </div>

여기서 좌우에 배치된 이미지가 양 끝에 있기 때문에 다음과 같이 코드를 짤 수 있을 것 같다.

display: flex;
justify-content: space-between;
align-items: center;

그럼 justify-content: space-between; 속성으로 인해 양 끝엔 이미지가 배치되고
텍스트는 가운데에 떨렁 남아있을 것이다.

이제 클래스명을 space 로 한 span 태그를 다음과 같이 삽입해보자.

  <div class="top-chat-nav">
    <button>
      <img src="..." alt="...">
    </button>
    <strong>애월읍 위니브 감귤농장</strong>
    <span class="space"></span>
    <button>
      <img src="..." alt="...">
    </button>
  </div>

그리고 space에 대한 CSS코드는 위에서 배운 flex: 1; 적용해준다.

.space {
  flex: 1;
}

flex: 1 로 인해 남은 여백은 전부 span 태그가 차지하게 되고 자연스레 텍스트는 왼쪽으로 배치가 된다.