Specifying what elements to lay out as flexible boxes

flex 박스로 배치할 엘리먼트의 부모 엘리먼트에 display : flex 를 설정한다.
<section> 엘리먼트의 하위에 <article> 엘리먼트 3개가 있다고 하자.
<article> 엘리먼트들을 flex 박스로 배치하고 싶다면 아래와 같이 한다.

section {
  display: flex;
}

이때 <section> 을 flex container, <article> 들을 flex items라고 한다.
<section> 은 페이지의 나머지 부분과 상호작용 하는 방식에 있어서 블록 레벨 엘리먼트처럼 동작하지만 하위 엘리먼트인 <article> 들은 flex items로 배치된다.
하위 동작은 그대로 둔 채 부모 엘리먼트인 <section> 만 인라인 레벨 엘리먼트로 바꾸려면 display: inline-flex 로 설정하면 된다.

The flex model

엘리먼트가 flex items로 배치되면 두 개의 축을 따라 배치된다.

• main axis는 flex item이 배치되는 방향으로 실행되는 축이다.
  main axis의 시작 부분과 끝 부분을 main start와 main end라고 부른다.

• cross axis는 flex item이 배치되는 방향의 수직으로 동작하는 축이다.
  cross axis의 시작 부분과 끝 부분을 corss start와 cross end라고 부른다.

이 용어들은 flex box를 설명하는 문서에서 자주 사용되는 용어이다.

Columns or rows?

Flexbox는 main axis의 방향을 지정하는 flex-direction 이라는 속성을 제공한다.
기본적으로는 row 로 설정되어 있으며, 이 경우 브라우저의 기본 언어가 작동하는 방향(영어 한글 같은 경우 왼쪽에서 오른쪽)으로 배치된다.
사용가능한 값으로는 다음과 같다.

• row

• row-reverse

• column

• column-reverse

Wrapping

레이아웃에 너비와 높이가 고정되어 있을 때 발생하는 한 가지 문제는 flexbox children이 container를 넘치게 되어 레이아웃이 손상된다는 것이다.

이런 경우 container 엘리먼트에 flex-wrap 프로퍼티를 사용하면 된다.

flex-wrap: wrap;

또한 flex items에 flex 를 설정하면 아이템의 기본 너비를 설정할 수 있다.

flex: 200px;

flex: 200px 선언은 각각이 최소 200px 너비가 될 것임을 의미한다.

flex 프로퍼티 사용법은 밑에서 다시 알아보자.

wrap되고 난 후, 맨 밑의 나머지 엘리먼트들은 전체 행이 채워지도록 각각 더 넓게 만들어 진다.

flex-direction 프로퍼티의 값에 붙는 reverse와 flex-wrap 프로퍼티의 값에 붙는 reverse를 헷갈리면 안된다.
여러줄로 wrap된 상태에서 flex-direction: row-reverse 를 적용한 모습은 아래와 같다.

wrap의 순서(블록 방향)와는 관계없이 inline방향의 순서만 바뀌었다.

다음은 wrap-reverse 를 적용한 모습이다.

블록방향의 순서가 반전되었다.

flex-direction 와 flex-wrap 를 포함하는 shorthand 프로퍼티인 flex-flow 가 있다.
공식문서에서는 shorthand 프로퍼티 사용을 장려하는 편이다.

Flexible sizing of flex items

flex items에 flex: 1 을 설정했다고 해보자.
이것은 각 flex item이 다른 flex item과 비교하여 main axis을 따라 얼마나 많은 가용 공간을 차지할 것인지를 지시하는 단위없는 비율 값이다.

article {
  flex: 1;
}

이 경우 각 <article> 엘리먼트에 동일한 값(1)을 부여하므로 padding 및 margin과 같은 프로퍼티가 설정된 후 남은 여유 공간을 모두 동일한 양으로 차지하게 된다.
flex item간의 비율 값이므로 각 flex item에 100을 지정해도 1을 지정한것과 동일한 동작을 얻는다.

article:nth-of-type(3) {
  flex: 2;
}

총 3개의 <article> 중에 세 번째 <article> 에만 2로 설정하고 나머지는 1로 설정되어 있다면 "1 + 1 + 2 = 4" 라는 계산식에 따라 남는 여백의 2/4를 세 번째 <article> 이 가져간다.

flex box 내에서 flex item이 최소 크기값을 갖도록 지정할 수도 있다.

article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}

위의 코드는 "각 flex item에는 먼저 사용 가능한 공간의 200px가 제공된후, 나머지 가용 공간은 비례 단위에 따라 공유된다." 라는 것을 의미한다.

flex 프로퍼티는 flex-grow , flex-shrink , flex-basis 을 포함하는 shorthand 프로퍼티이다.
반드시 필요한 경우가 아니면 longhand 프로퍼티를 사용하지 않는 것이 좋다.
longhand 프로퍼티는 많은 코드들이 쓰여지게 하고 다소 혼란스러울 수가 있기 때문이다.

Horizontal and vertical alignment

align-items 는 flex items의 cross axis 위치를 제어한다.

• 기본값은 stretch 이며 모든 flex item을 cross axis방향으로 부모 엘리먼트의 크기만큼 채우도록 확장시킨다.
  부모 엘리먼트가 고정된 크기를 가지지 않았다면, flex item 중에 제일 큰 item을 기준으로 그 만큼 확장시킨다.

• center 값은 flex item이 intrinsic dimensions을 가진채 cross axis 방향의 중심에 위치시킨다.

• flex-start 및 flex-end 와 같은 값을 사용하여 cross-start 또는 cross-end에 위치시킬 수 있다.
  flex-start 와 start 의 차이점은 flex-start 는 flex-direction 에 의존한다는 점이다.

개별 flex item에 대해 align-self 를 적용하여 cross axis의 위치를 재지정 할 수 있다.

button:first-child {
  align-self: flex-end;
}

justify-content 는 flex items의 main aix 위치를 제어한다.

• 기본값은 flex-start 이다.

• center 값은 중앙 정렬이다.

• space-around 는 모든 item을 main axis을 따라 균등하게 분포하고 양쪽 끝에 약간의 공간이 남아 있도록 한다.

• space-between 는 space-around 와 비슷하지만 양쪽 끝에 공간이 없다.

flexbox 레이아웃에서는 justify-items 프로퍼티가 무시된다.

Ordering flex items

Flexbox에는 코드 순서에 영향을 주지 않고 flex item의 레이아웃 순서를 변경할 수 있는 기능도 있다.

button:first-child {
  order: 1;
}

flex 레이아웃 내에 여러 <button> 엘리먼트들이 있다고 가정한다면 첫 번째 버튼이 맨 뒤로 간다.

이 기능이 어떻게 동작하는지 좀 더 자세히 알아보자.

• 기본적으로 모든 flex item은 order 값으로 0을 가진다.

• order 값이 높으면 뒤쪽에 나타나고 낮으면 앞쪽에 나타난다.

• order 값이 동일한 flex item이면 코드 순서에 따라 나타난다.
  따라서 order 값이 각각 2, 1, 1, 0 으로 설정된 4개의 item이 있는 경우 표시 순서는 4번째, 2번째, 3번째, 1번째가 된다.

기본 값인 0보다 먼저 item을 표시하도록 음수 값을 설정할 수 있다.

Cross-browser compatibility

Flexbox 지원은 대부분의 모던 브라우저에서 사용할 수 있다.
하지만 오래된 브라우저 중에는 지원하지 않는 브라우저가 있음을 알아야 한다.

실제 웹 사이트에서 flexbox를 사용할 생각이라면 테스트를 수행하고 가능한 한 많은 브라우저에서 사용자 환경이 허용되는지 확인해야 한다.

Flexbox game

Flexbox Froggy : Flexbox의 기본 사항을 배우고 더 잘 이해하기 위한 교육용 게임

[참고] : MDN