CSS # Flexbox

📝오늘 배운 내용

오늘은 예전부터 사용하고 싶었지만 헷갈리는 부분이 많았던 flex 사용법에 대해 공부했다.
CSS 사용하여 화면을 꾸밀 때 꼭 사용할 줄 알아야 하는 것 같아 더 꼼꼼히 공부해야 했다.

flex 속성은 레이아웃을 구성하거나 요소들의 위치를 변경하려고 할 때 등 아주 편리하게 사용할 수 있다.

• display : flex container를 정의한다.
• justify-content : 가로 축의 정렬 방법을 설정한다.
• align-content : 2줄 이상의 세로 축 정렬 방법을 설정한다.
• align-items : 1줄의 세로축 items의 정렬 방법을 설정한다.

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: 요소들을 아래에서 위로 역방향 정렬한다.