CSS - flexbox 정리

일기 및 회의록 

오늘은 위코드 4일차가 되는 날이다. 

계속 repl.it에서 자바스크립트 문제만 풀어나가고 있었다.

오후 3시 쯤에 html/css QnA 시간이 있어서 QnA를 들으러 위워크 8층 회의실에 들어갔다.

QnA시간에 html이 무엇인가?, html, css, javascript를 하나로 표현하세요. 이런 질문들을 해주시는데 아무말도 할 수 없었다.

거기서 나는 너무 repl.it의 과제 풀기에만 급급했고, 정확한 개념을 숙지하지 못했다.

 html과 css에 대해 전반적으로 정리를 해주셨고, 그 중 flexbox라는 것을 설명 해주셨는데 잘 모르는 내용이라 어려웠지만 많이 쓰이는 속성들 위주로 알려주셨다. 또, 공부하는 방법이나 여러 가지 조언을 해주셔서 굉장히 좋았다.

이 QnA가 끝나고 나서 든 생각은 정확히 알고 넘어가야겠다 라는 생각이 들었다. 

 

flexbox가 생긴 이유

원래는 웹 페이지의 레이아웃은 CSS의 display, float, position등과 같은 속성을 사용해 구현한다.

하지만, 이 속성들을 사용하면 구현 방법이 복잡해지고, 레이아웃을 표현하는데 많은 어려움을 겪는다.

이러한 어려움을 극복할 수 있게 CSS3에서 추가된 레이아웃 방식이 바로 flexbox이다.

이 flexbox를 사용하면 요소의 크기와 순서를 유연하게 배치할 수 있다.

 

flexbox란?

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때, 효율적으로 요소를 배치, 정렬, 분산할 수 있는 방법을 제공한다.

 

flexbox의 구성

flexbox는 복수의 부모 요소인 flex container과 그 상위 자식 요소인 flex item으로 구성된다.

 

flexbox를 만드는 법은 간단하다. 정렬하려는 요소의 부모 요소한테 다음과 같이 display: flex 속성을 선언하면 된다.

.flex_container {
  display: flex;
}

display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 된다.

a마치 flex container와 flex item은 부모 요소와 자식 요소를 한 세트로 사용하는 ul과 li와 같다고 보면 된다.

 

부모 요소와 자식 요소에 정의하는 속성 구분

전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의한다. 그렇기 때문에, 이를 분리해서 적용시키는 것이 중요한다.

부모 : flex container 속성

→  flex-direction, flex-wrap, justify-content, align-items, align-content

flex-direction 속성

flexbox는 주축에 따라 정렬된다. 주축의 방향은 flex container의 flex-direction속성으로 결정한다. 속성을 따로 지정하지 않으면 기본값으로 row가 적용된다.

row는 왼쪽에서 오른쪽으로 수평 방향으로 흐르고, 반대로 column은 위에서 아래로 수직 방향으로 흐르게 한다.

flex-wrap 속성

flex-wrap은 flex item이 flex container를 벗어났을 때 줄을 바꾸는 속성이다. 

justify-content 속성

justify-content 속성은 주축을 기준으로 flex item을 수평으로 정렬한다.

- flex-start(기본값): 주축의 시작 부분을 기준으로 flex item을 정렬한다.

- center : 주축의 중앙을 기준으로 flex item을 정렬한다.

- flex-end: 주축의 끝부분을 기준으로 flex item을 정렬한다.

- space-around: 주축을 기준으로 flex item을 일정한 간격으로 정렬한다.

- space-between: 첫 번째와 마지막 flex item은 주축의 시작 부분과 끝부분에 정렬하고 나머지 flex item을 일정한 간격으로 정렬한다.

align-items 속성

align-items 속성은 주축을 기준으로 flex item을 수직으로 정렬한다.

- stretch(기본값): flex item의 높이를 늘려 flex container의 전체 높이를 채운다.

- flex-start: 교차축의 시작 부분을 기준으로 flex item을 정렬한다.

- center: 교차축의 중앙을 기준으로 flex item을 정렬한다.

- baseline: 글꼴의 기준선인 baseline을 기준으로 flex item을 정렬한다.

- flex-end: 교차축의 끝부분을 기준으로 flex item을 정렬한다.

 

자식 : flex item 속성

→ flex, flex-grow, flex-shrik, flex-basis, orderflex-end: 주축의 끝부분을 기준으로 flex item을 정렬한다.

flex 속성

flex item에 적용한 flex 속성은 flex item의 크기와 관련된 속성이다.

flex-grow 속성

flex-grow 속성은 flex item의 확장에 관련된 속성이다. 0과 양의 정수를 속성값에 사용한다.

flex-shrink 속성

flex-shrink 속성은 flex item의 축소에 관련된 속성이다. 0과 양의 정수를 속성 값에 사용하고, 기본값은 1이다.

flex-basis 속성

flex-basis 속성은 flex item의 기본 크기를 결정하는 속성이고, 기본값은 auto다.

width 속성에서 사용하는 모든 단위(px, %, em, rem 등)를 속성 값에 사용할 수 있다. 

flex-basis 속성의 값을 70px이나 70%와 같이 설정하면 flex item의 크기가 고정된다.

flex-basis 속성의 값을 0으로 설정하면 flex container를 기준으로 크기가 결정되고, auto로 설정하면 flex item의 콘텐츠의 크기를 기준으로 크기가 결정된다.