[CSS] Flexbox

Aligning Items in a Flex Container

flexbox는 웹페이지의 최초의 정렬기능이며 1차원 레이아웃 모델로 설계되었다.

인터페이스의 항목 간 공간 분배와 강력한 정렬 기능을 제공할 수 있는 방법으로 설계되었다

Flexbox 의 2개의 축

Flexbox는 main axis 와 cross axis 두개의 축을 가진다. main axis는 flex-direction property로 정할 수 있다.

가로를 main axis로 하고 싶다면 flex-direction: row

세로를 main axis로 하고 싶다면 flex-directoin: column

flex-direction

• row
• row-reverse
• column
• column-reverse

row 또는 row-reverse을 선택할 경우 주 축이 행을 따라 인라인 방향으로 배치된다.

row

row-reverse

column 또는 column-reverse을 선택할 경우 주 축이 열을 따라 인라인 방향으로 배치된다.

 

EOF