Flexbox

요소의 정렬되는 방향, 순서, 요소 간으 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식

1. Flexbox의 구성

• flex-container : 정렬이 필요한 요소를 감싸는 요소
• item : 정렬을 적용할 요소
• (flex-container와 item에 사용되는 flex 관련 css 속성이 나누어져 있음)

2. Flexbox의 축

• 중심축 main axis
• 교차축, 반대축 cross axis
  ==> container 기준 !!!

.flex-container{
	display: flex;

item(내부 요소)를 감싸는 요소의 형식을 flex로 변경!
-> item에 자동으로 지정된 margin 요소가 모두 사라지고 content 영역 만큼의 크기만 가지게 됨
📍item에 별도 height/width가 지정되어있지 않으면 item의 높이는 flex-container의 높이/너비와 같아지게 된다!!(flex-container 정렬 방향에 따라 다름)

☑️ flex-direction

flex-container 전용 속성: 중심 축(main axis)의 방향과 시작 위치를 지정하는 속성

• flex-direction: row; -> 행 방향(가로, 기본값)
• flex-direction: row-reverse; -> 행 방향(가로 + 순서 반대)
• flex-direction: column; -> 열 방향(세로)
• flex-direction: column-reverse; -> 열 방향(세로 + 순서 반대)

☑️ flex-wrap

item을 한 줄로 배치

• flex-wrap: nowrap; -> 기본값
• flex-wrap: wrap; -> item을 여러줄로 배치
• flex-wrap: wrap-reverse; -> item을 열로줄로 뒤에서부터 배치

☑️ align-content -> flex-wrap: wrap;인 상태에서만 사용! => 상하축!

반대축(cross axis) 방향으로 item이 포장된(wrap)라인을 정렬하는 방법
[조건] : flex-wrap: wrap; 또는 wrap-reverse 일 때만 사용 가능!!
[속성값] : justify-content의 속성값 전부 사용 가능!

• flex-start : 반대축 방향 시작 지점으로 포장된 item들을 정렬
• flex-end : 반대축 방향 끝 지점으로 포장된 item들을 정렬
• center : 반대축 방향 가운데 지점으로 포장된 item들을 정렬
• space-around : 반대축 방향으로 포장된 item들을 양쪽으로 일정한 공간을 나눠주어 정렬
• space-evenly : 반대축 방향으로 포장된 item들에 동일한 크기의 공간을 나누어 정렬
• space-between : 반대축 방향으로 포장된 item들이 동일한 크기의 공간을 나누어 정렬(단, 양 끝 공간X)
  -> 처음과 끝을 flex-container에 붙어있게 함

☑️ flex-flow ( flex-direction + flex-wrap )

ex) flex-flow: row-reverse wrap;

☑️ justify-content -> 좌우축

중심축(main axis) 방향으로 item(내용)의 정렬 방법을 조정

• flex-start : 중심축 시작 지점을 기준으로 정렬(기본값)
• flex-end : 중심축 끝 지점을 기준으로 정렬함
• center : 중심축 가운데 정렬
• space-around : item 주위에 중심축 방향 양쪽으로 일정한 크기에 공간을 추가
  -> 양끝은 조금, item 중간은 넓게 떨어져 있음
• space-evenly : item이 중심축내에서 동일한 간격을 가지게 됨
• space-between : space-evenly에서 양끝은 flex-container에 붙게 함(양 끝 공간X)

☑️ align-items -> 상하축

item들을 반대축, 교차축(cros axis) 방향으로 정렬하는 방법을 지정하는 속성
item들의 너비 또는 높이를 cross axis 방향으로 늘려서 flex-container와 같은 크기를 가지도록 함

• stretch : 조건-> item에 cross axis 방향의 크기 지정 속성이 없어야 함
• flex-start : 시작부분 기준
• flex-end : 끝부분 기준
• center : 가운데 기준
• baseline : item 내부 content가 모두 한줄에 배치될 수 있도록 item 요소를 cross axis로 움직이는 설정

📝 요소 정가운데 배치하기

.container{
	display: flex;
    justify-content: center; /*좌우축*/
    align-items: center /*상하축*/
}

item 전용 속성

☑️ order

flex-container 내부 item의 순서를 지정하는 속성 (기본값 0, 정수, 양수/음수 가능)

☑️ flex-grow (팽창)

item이 flex-container 내부에서 비어있는 공간을 매꿀 수 있도록 팽창하는 정도를 지정하는 속성
기본값 0 : 팽창 X

☑️ flex-shrink (수축)

item이 수축하는 정보를 지정하는 속성 --> 잘 안씀!
기본값 1

☑️ flex-basis

item의 중심축 방향으로의 기본 점유율(크기)를 지정하는 속성
(각종 크기 단위 px, %, vh, em, rem 등 사용 가능)
flex: 0 0 50%;
-> flex-grow, flex-shrink, flex-basis

☑️ align-self

각각 item 별로 반대축 방향으로 정렬을 지정하는 속성

• flex-start
• flex-end
• center