[CSS in Depth] Flexbox

Kyoorim LEE·2023년 4월 7일

5.1 Flexbox 원칙

flexbox는 display 속성을 사용하여 구현한다. display: flex를 줌으로써 해당 컨테이너의 첫번째 자식요소들에 flex를 적용할 수 있다.

display: inline-flex를 사용할 수도 있다. display: flex와 다른 점은, inline-flex를 주게 되면 block 요소가 아닌 inline-block 요소로 기능하게 된다. 즉, width가 반드시 100%가 아니라 요소의 width만큼 block 지정이 되는 것이다.

block - 부모 컨테이너 만큼 width 차지
inline-block - 컨텐트 크기가 필요로하는 만큼 width 차지

5.1.1 기본 flexbox 메뉴 만들기

위와 같은 메뉴를 만들기 위해서는 어떤 요소들을 flex 컨테이너로 묶을 지 생각해야 한다. flex 컨테이너는 <ul> 요소가 되고 자식 요소들은 <li> 이 되어야 한다.

1) site-nave list => flex container
2) list items (flex items)
3) anchor tags (the links)

Vender prefixes
CSS Vendor prefixes (or browser prefixes) are a way for browsers to give access to new CSS features not yet considered stable.
.site-nav {
  display: -webkit-flex;
  display: flex;
}

Vendor prefixes를 쓰는 이유

IE 구버전이나 Safari 구 버전을 쓰는 경우 flexbox가 적용되지 않는 경우가 있는데 이는 구 버전이 flexbox 사ㅏ용을 위해서 vendor prefixes를 필요로 하기 때문이다. 새로나온 CSS 속성이 안정되기 전까지 취한 방법이다.

이 경우 Autoprefixer라는 라이브러리를 설치하면 여러분이 지원하려고 하는 브라우저를 위한 vendor prefixes를 자동으로 생성해준다.

예시 - 내가 친 코드

.example {
  display: flex;
}

예시 - Autoprefixer가 고친 코드

.example {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

5.1.2 padding과 간격 주기

<li>가 아닌 <a>에 padding을 줘야한다.

1. `<a>` 요소에 적용

코드)

    .site-nav > li {
      margin-top: 0;
    }

    .site-nav > li > a {
      display: block;
      padding: 0.5em 1em;
      background-color: #cc6b5a;
      color: white;
      text-decoration: none;
    }

결과)

2. `<li`> 요소에 적용

    .site-nav > li {
      display: block;
      padding: 0.5em 1em; 
      margin-top: 0;
    }

    .site-nav > li > a {

      background-color: #cc6b5a;
      color: white;
      text-decoration: none;
    }

결과)

3. 인접 형제 결합자 및 margin-left

    .site-nav > li + li {
      margin-left: 1.5em;
    }

    .site-nav > .nav-right {
      margin-left: auto;
    }

첫번째 <li> 자식 다음으로 오는 <li> 자식들에 margin-left: 1.5em을 적용한다
마지막 버튼인 .nav-right 클래스에 margin-left요소를 주어 마지막 버튼을 오른쪽에 붙이고 나머지 공간을 margin으로 채우도록 처리한다.

만약 마지막 요소 하나가 아닌 두 번째 요소(About 메뉴)부터 오른쪽으로 밀어버리고 싶다면 두 번째 요소에 margin-left: 1.5em을 적용하면 된다.

특정 요소에 다른 spacing을 원하는 경우 margin으로 조정하면 되지만 모든 요소에 동일한 spacing을 주고 싶은 경우 justify-content를 사용하면 된다.

5.2 Flex 아이템 사이즈

flexbox를 이용하면 margin, width, height 속성을 이용한 것보다 더 많은 옵션을 활용할 수 있다.

display: flex를 적용했더니 아래와 같은 결과가 나온다.

이 상태에서 아직 두 columns에 width값을 주지 않았으므로 안의 content 크기에 맞게 설정되며 전체 공간을 차지하지 않고 여백이 생기게 된다.

flex 속성을 사용하게 되면 자동 계산을 해준다.

.column-main {
  flex: 2;
}
.column-sidebar {
  flex: 1;
}

위 값을 넣는 순간 두 columns가 여백을 채우게 되면서 nav와 동일한 width를 갖게 된다.

위 코드는 아래값과 동일한 의미를 지닌다.

flex: flex-grow flex-shrink flex-basis

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

5.2.1 flex-basis

flex-basis는 요소 크기에 대한 일종의 시작점(초기 "기본 크기")을 정의한다. flex-basis 속성은 px, ems 또는 백분율 값을 포함하여 너비에 적용되는 모든 값으로 설정할 수 있다. 초기 값은 auto이며 이는 브라우저가 해당 요소에 선언된 너비가 있는지 확인한다는 뜻이며 이 경우 브라우저는 해당 크기를 사용한다. 그렇지 않은 경우 내용에 따라 요소의 크기를 자연스럽게 설정한다.