flex 정리

flex(Flexible Box) 레이아웃

display: flex 속성을 부모 태그에 주면 화면에 정렬하고 싶은 자식 요소들을 편하게 정렬할 수 있다.

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

가로정렬

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 : 요소들을 아래에서 위로 정렬
  마찬가지로 컨테이너 자체를 위아래로 뒤집은 느낌