[CSS] (flex 활용) 상단 메뉴 구성, 라이브러리 추가

display:block; 등을 활용하면서 추가 적용했던 부분을 flex를 배우면서 정말 편한 태그임을 확인하고 적용해보았음

 

부모클래스에게 적용

flex 사용하기 위해서는 부모클래스에게 display:flex; 적용 후 활용해야 한다.

 

자식클래스에게 적용

flex-direction : flexbox 내에서 flexbox 항목을 정렬하는 방법 (display 적용과 동일하게 활용)

flex-direction: row; : 기본값, 기본 축을 따라감(텍스트 방향과 같이 좌에서 우로 정렬)

flex-direction: row-reverse; : 주 축을 따라감, 텍스트 방향과 반대 방향으로 정렬

flex-direction: column; : 교차 축을 따라감, 텍스트 방향과 같은 방식으로 정렬

See the Pen Untitled by devCJH (@devcjh) on CodePen.