flex-box

플렉스박스는 사용자 인터페이스 디자인에 최적화된 레이아웃을 정의하는 CSS.
이미지, 텍스트 같은 요소를 원하는 곳에 배치하는 데 사용합니다. 인라인이 단순히 여백을 없애는 데 사용한다면, 플렉스박스는 여백을 없앨 뿐만 아니라 축을 변경한다든지, 자식 간의 정렬을 가운데로 맞출 때도 사용합니다. 즉 유연하게 박스 레이아웃을 변경할 수 있다는 장점이 있습니다.

flex 속성

주축 정렬하기 : justify-content

justify-content : 웹 페이지의 축을 따라 요소 사이에 공간을 만드는 방법을 정의합니다. 기본값 주축은 가로 교차축은 세로

❶ flex-start : 시작 부분에 정렬
❷ flex-end : 끝에 정렬
❸ center : 중앙에 정렬
❹ space-between : 요소가 축을 따라 펼쳐집니다(각 요소 사이에 공간이 있음).
❺ space-around : 요소가 축을 따라 펼쳐지지만 가장자리 주변에도 공간이 있습니다.

flex-direction : 축을 변경 해줄 수 있기 때문에 가로, 세로 대신 주축, 교차축이라고 지칭합니다.
다시 말해 flexbox는 두 축(주축, 교차축)을 기준으로 움직이기 때문에 축 방향을 기준으로 요소를 움직일 수 있다.

❶ row(기본값) : 가로 방향(행) 배치
❷ row-reverse : 역순으로 가로 방향(행) 배치
❸ column : 세로 방향(열) 배치
❹ column-reverse : 역순으로 세로 방향(열) 배치

교차축 정렬하기 : align-items

❶ stretch : 요소의 길이와 교차축의 길이를 같게 함
❷ flex-start : 시작 위치에 정렬
❸ flex-end : 끝 정렬
❹ center : 중앙 정렬