CSS - Flex Container

CSS Flex 속성 그 중에서도 Container가 가지는 속성에 대해 간략히 적어보려 한다.

Flex?

모든 요소는 기본적으로 수직으로 쌓이는 걸 알고 있다. 인라인 요소가 아니라면 따라서 이에 수평으로 쌓는 걸 예전에는 테이블을 사용하였으나 CSS의 Flex를 사용 할 경우 편하게 다룰수 있다.

Flex Containers

Flex 속성을 사용할 구역을 정하고 해당 구역을 Flex Container라고 한다.

Flex Containers 속성

아래와 같은 속성들이 있다.

속성	의미	기본값
flex-flow	direction, wrap의 단축속성	-
flex-direction	flex의 방향 설정	row
flex-wrap	줄바꿈 여부 및 방향 설정	nowrap
justify-content	주축 정렬 설정	flex-start
align-content	교차축 정렬 설정 - 다행	stretch
align-items	교차축 정렬 설정 - 단행	stretch

예제

<div class="flex-box">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</div>

.flex-box {
  display: flex;
  flex-flow: row-reverse wrap;
  justify-content: space-around;
  align-items: center;
}