Flex

flex는 children요소에는 지정하지 않는다. 바로 붙어있는 부모에 지정해야한다.

inline-block과 같은 결과를 얻을 수 있다.

display:flex;

row_main axis

flex-direction:row;

기본적으로 row가 디폴트값이다.

row가 디폴트값일때 가로방향을 main axis라고 불린다.

main axis방향으로 item을 옮기기 위해서는 justify-content를 사용한다.

justify-content:center;

내용이 중앙으로 이동된다.

justify-content:space-between;

컨텐츠사이에 일정한 공간을 두고 배치된다.

justify-content:space-around;

컨텐츠가 일정한 공간을 두고 배치가 되고 양옆에도 여백을 둔다.

row_cross axis

align-items:center;

row가 디폴트값일때 세로방향을 cross axis라고 불린다.

cross axis방향으로 item을 옮기기 위해서는 align-items을 사용한다.

flex father의 높이안에서 이동된다.

align-items:stretch;

flex father의 전체 높이만큼 채워진다.

이 경우에는 컨텐츠의 높이가 지정되어 있으면 적용되지 않는다.

align-items:flex-end;

컨텐츠가 아래에 위치하게 된다.

column

flex-direction:column;

row방향과는 반대로 column은 main axis는 세로방향이고, cross axis는 가로방향이다.

Grid

display:grid;

grid도 flex처럼 father에 적용한다.

grid-template-column

grid-template-column: 20px 55px 89px 100px;

첫번째는 20px이 적용되고 두번째는 55px이 적용된다.

grid-template-row

grid-template-rows:50px 50px;

repeat

grid-template-column: repeat(4, 100px);

100px을 4번 반복해준다.

column-gap/row-gap

column-gap:10px;
row-gap:10px;
gap:10px;

column간의 간격을 조절한다.

그냥 gap만 쳐도 column과 row가 동시에 조절된다.