TIL #21. css-flex사용법

ceres·2020년 2월 22일
0

TIL

목록 보기
5/34

Flexbox Froggy

display: flex; 후 적어줘야함

  1. justify-content: 가로정렬
    ex) justify-content: flex-end;
  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center: 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between: 요소들 사이에 동일한 간격을 둡니다.
  • space-around: 요소들 주위에 동일한 간격을 둡니다.
  1. align-items: 세로정렬
  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
  • center: 요소들을 컨테이너의 가운데로 정렬합니다.
  • space-between: 요소들 사이에 동일한 간격을 둡니다.
  • space-around: 요소들 주위에 동일한 간격을 둡니다.
  1. flex-direction: 컨테이너 안에서 요소들이 정렬해야할 방향 지정
  • row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
  • column: 요소들을 위에서 아래로 정렬합니다.
  • column-reverse: 요소들을 아래에서 위로 정렬합니다.
  1. order 
    ex)
    .yellow {
    order: 1; } yellow 속성을 1칸 옆으로 이동
    음수, 양수 둘 다 가능
  1. align-self
    개별 요소에 적용할 수 있는 또 다른 속성입니다. 이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용

  2. flex-wrap 

  • nowrap: 모든 요소들을 한 줄에 정렬합니다.
  • wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
  1. flex-flow
    flex-direction과 flex-wrap 두개를 인자로 받음
    ex) flex-flow: row wrap

  2. align-content : 여러 줄 사이의 간격을 지정

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

Flexbox Froggy

0개의 댓글