CSS flexbox

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

 

justify-content

main-axis 정렬

flex-direction 설정값에 따라서 justify-content 값을 적용한 결과가 달라진다.

 

flex-wrap

flex -wrap: wrap;

flex-wrap: wrap-reverse;

 

여기서 reverse는 cross-axis 방향을 반대로 바꾼다.

* flex-direction: row; 일 때 cross-axis는 세로축, flex-direction: column; 일 때는 cross-axis는 가로축이다.

 

align-items

cross-axis 정렬.

align-content

cross-axis 정렬. flex-wrap이 적용되어서 여러 행이나 여러 열이 있을 때 사용한다.

align-self

cross-axis 정렬. 개별 요소에 적용한다.

flex-basis

요소의 최초 크기

주축의 방향에 따라 너비 또는 높이를 설정한다.

flex 속기법

flex-grow shrink basis 한꺼번에 작성