CSS flexbox

  CSS flexbox를 이용하면 웹페이지를 이쁘게 꾸밀 수 있다. HTML의 <table> 태그와 비슷한 듯 하지만 다르다. flexbox는 결과물은 이쁜데 그 과정이 제대로 알고 보면 쉽지만 제대로 모르고 보면 복잡하고 헷갈린다. 그러니 아래의 내용을 대충 읽지 말고 차근차근 정독하자. 다시 말하지만 쓱 속독해서는 오히려 헷갈릴 것이다.

  flexbox는 부모 요소인 [flex container]와 다수의 자식 요소인 [flex items]로 구성된다.

<div id="container">
  <div class="items">자식요소1</div>
  <div class="items">자식요소2</div>
  <div class="items">자식요소3</div>
</div>

  결국 [flex container]와 [flex items]에 각각 합당한 속성을 부여해 이쁜 결과를 만드는 것이 flexbox를 활용하는 방법이다.

속성	값
container	display, flex-flow(flex-direction, flex-wrap), justify-content, align-content, align-items
items	order, flex(flex-grow, flex-shrink, flex-basis), align-self

flex container> display

  어떤 개체를 [flex container]로 사용하기 위해선 먼저 아래와 같이 정의를 해주어야 한다.

#container {
  display: flex;
}

flex container> flex-flow> flex-direction

  flex-flow보다 그 하위 개념인 flex-direction을 먼저 알아야 된다는 사실에 의아해하지 말고 읽어라. 다 이유가 있다. 

  flex-direction은 items의 주 축(main-axis)을 설정한다. 그에 따라 교차 축(cross-axis)도 자동으로 결정된다. 그에 따라 시작점(flex-start)과 끝점(flex-end)도 자동으로 결정된다.

#container {
  flex-direction: row;
}

값	의미	주축	교차축	시작점	끝점	기본값
row	items를 왼쪽에서 오른쪽으로 표시한다.	수평	수직	왼쪽	오른쪽	○
row-reverse	items를 오른쪽에서 왼쪽으로 표시한다.	수평	수직	오른쪽	왼쪽
column	items를 위에서 아래로 표시한다.	수직	수평	위	아래
column-reverse	items를 아래에서 위로 표시한다.	수직	수평	아래	위

flex container> flex-flow> flex-wrap

  flex-wrap은 items의 줄 바꿈을 설정한다.

#container {
  flex-wrap: nowrap;
}

값	의미	기본값
nowrap	items를 줄 바꿈 하지 않음	○
wrap	items를 flex-direction 방향으로 줄 바꿈 함
wrap-reverse	items를 flex-direction의 역방향으로 줄 바꿈 함

flex container> flex-flow

  flex-flow는 flex-direction과 flex-wrap을 한 번에 표시할 수 있게 해 준다.

#container {
  flex-flow: row nowrap;
}

flex container> justify-content

  justify-content는 주축의 정렬 방법(align)을 설정한다.

값	의미	기본값
flex-start	items를 시작점에 붙인다.	○
flex-end	items를 끝점에 붙인다.
center	items를 가운데에 붙인다.
space-between	시작 item을 시작점에 붙이고 끝 item을 끝점에 붙인 후 나머지를 고르게 정렬한다.
space-around	items를 양 끝의 균등한 여백을 포함하여 정렬한다.

#container {
  justify-content: center;
}

flex container> align-content

  align-content는 교차축 자체의 정렬 방법(align)을 설정한다. 단, flex-wrap 속성을 통해 items가 2줄 이상이고 여백이 있을 경우만 사용할 수 있다.

값	의미	기본값
stretch	Items를 늘려 교차축을 꽉 채운다.	○
flex-start	items를 시작점에 붙인다.
flex-end	items를 끝점에 붙인다.
center	items를 가운데에 붙인다.
space-between	시작 item을 시작점에 붙이고 끝 item을 끝점에 붙인 후 나머지를 고르게 정렬한다.
sapce-around	items를 양 끝의 균등한 여백을 포함하여 정렬한다.

flex container> align-items

  align-items는 교차축 안에서 items 정렬 방법(align)을 설정한다. 단, flex-wrap 속성을 통해 items가 2줄 이상이면 align-content 속성이 우선된다. 따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 한다.

.items {
  align-items: stretch;
}

값	의미	기본값
stretch	Items를 늘려 교차축을 꽉 채운다.	○
flex-start	items를 시작점에 붙인다.
flex-end	items를 끝점에 붙인다.
center	items를 가운데에 붙인다.
space-between	시작 item을 시작점에 붙이고 끝 item을 끝점에 붙인 후 나머지를 고르게 정렬한다.
sapce-around	items를 양 끝의 균등한 여백을 포함하여 정렬한다.

flex items> order

  item의 순서를 설정한다. 숫자가 작을수록 앞쪽에 숫자가 클수록 뒤쪽에 배치되고 음수도 허용된다. 기본값은 0.

.items:nth-child(1) {
  order: 1;
}

flex items> flex-basis

  item의 (공간 배분 전) 기본 너비를 설정한다. 값이 auto 일 경우 내용물의 width 값이 기본 너비가 된다. 값을 단위와 함께 설정해주면 내용물의 width 값에 설정한 값이 더해져서 기본 너비가 설정된다. 값이 0일 경우에는 내용물과 상관없이 기본 너비가 없다. 기본값은 auto.

.items:nth-child(1) {
  flex-basis: 0;
}

flex items> flex-grow

  item의 증가 너비 비율을 설정한다. 숫자가 클수록 더 많은 너비가 증가한다. Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다. 기본값은 0. 1해야 늘어난다.

.items:nth-child(1) {
  flex-grow: 1;
}

flex items> flex-shrink

  item의 감소 너비 비율을 설정한다. 숫자가 클수록 더 많은 너비가 감소한다. Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없다. 기본값은 1.

.items:nth-child(1) {
  flex-shrink: 1;
}

flex items> flex

  flex-grow, flex-shirink, flex-basis 순서로 한 번에 설정할 수 있다.

.items:nth-child(1) {
  flex: 0 1 auto;
}

flex items> align-self

  교차축 안에서 개별 Item의 정렬 방법을 설정한다. align-items는 container 내 모든 Items의 정렬 방법을 설정한다. 필요에 의해 일부 Item만 정렬 방법을 변경하려고 할 경우에 align-self를 사용한다. align-items보다 align-self가 우선이다.

값	의미	기본값
auto	container의 align-items 속성을 상속받는다.	○
stretch	Item을 늘려 교차축을 꽉 채운다.
flex-start	item을 시작점에 붙인다.
flex-end	item을 끝점에 붙인다.
center	item을 가운데에 붙인다.
baseline	item을 문자 기준선에 정렬한다.