Flex

해당 컴포넌트 속성에 'display: flex'를 적용해서 flex container를 만들 수 있다.

• 기본적으로 div는 block 속성을 갖고 있어서 수직으로 차곡차곡 쌓이게 된다.
• 'display: flex'를 적용하면 내부의 flex item들이 수평으로 정렬된다.
• 이 속성값을 설정해주면 해당 div가 flex container이며 내부 div들이 flex item으로 정의된다.

 

flex container와 flex item에는 적용할 수 있는 속성이 각각 다르다.

• flex container : display, flex-flow, flex-direction, flex-wrap, justify-content, align-content, align-items
• flex item : order, flex-grow, flex-shrink, flex-basis, flex, align-self