flex는 css의 display속성중 하나로, 본래 <table>이나 float혹은 inline-block 과같은 속성으로 배치하기힘든 레이아웃 디스플레이를 수행하기 위해 고안된 css 속성이다. flex로는 일반적인 수평구성뿐만아니라 수직 구성에도 용이하다.

flex는 container, item 이 두 개념으로 나뉜다. 이 두 요소에 적용하는 속성이 구분되어있다.

container - item

 Justify-content:
  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.

  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.

  • center: 요소들을 컨테이너의 가운데로 정렬합니다.

  • space-between: 요소들 사이에 동일한 간격을 둡니다.

  • space-around: 요소들 주위에 동일한 간격을 둡니다.

    Align-items:
  • flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.

  • flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.

  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.

  • baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.

  • stretch: 요소들을 컨테이너에 맞도록 늘립니다.

    flex-direction:
  • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.

  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.

  • column: 요소들을 위에서 아래로 정렬합니다.

  • column-reverse: 요소들을 아래에서 위로 정렬합니다.

    Flex-wrap
  • nowrap: 모든 요소들을 한 줄에 정렬합니다.

  • wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.

  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

    Align-content ( 줄들 사이 간격을 지정)
  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
  • center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
  • space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
  • space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

flex속성을 배우기 좋은사이트 : https://flexboxfroggy.com/#ko

개구리를 배치하는 게임으로, 쉽고 재밌게 flex속성을 배울수있다.

작성일 : 03/11/2019