CSS:Flexbox

개요

다양한 위치지정 등을 자동으로 계산해주어 반응형으로 위치를 자동으로 바꾸어 정렬한다.

레이아웃을 만들기 위한 강력한 도구.

성질

부모에게 주는 속성과 자식에게 주는 속성으로 나뉜다.

css로 작성한다.

부모의 성질

#container{
    /*기본적으로 가로정렬. colum으로 두면 세로정렬*/
    flex-direction: row;
    /*메인축 정렬. center, end, space-between(요소별로 여백 주기) 등 정렬을 정한다.*/
    justify-content: 
    /*서브축 정렬. 다양한 옵션이 가능하다.*/
    align-content: center;
    
}

자식의 성질

#container .items{
}