Flex

Flex

Flex는 모던 웹을 위하여 제안된 기존 레이아웃보다 더 세련된 방식의 니즈를 부합하기 위한 CSS3의 새로운 레이아웃 방식이다. Flexbox에서 사용하는 속성은 부모요소와 자식요소로 나눠진다. 전체적인 정렬이나 흐름에 관한 속성은 flex container에서 정의하고 자식 요소의 크기나 순서와 관련된 속성은 flex item에서 정의한다. 이를 분리해서 적용하는 것이 flex-box에서 가장 중요하다.

• flex container 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content
• flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order

속성	설명
align-content	콘텐츠의 상하관계 정렬 상태를 정의한다.
align-items	콘텐츠 내부의 정렬 상태를 정의한다.
align-self	콘텐츠의 정렬 상태를 정의한다.
flex	콘텐츠의 성질을 flex로 정의한다.
flex-basis	요소의 기본 단위를 정의한다.
flex-direction	요소의 정렬 방향을 정의한다.
flex-flow	요소의 정렬 방향과 줄 속성을 설정한다.
flex-grow	요소의 크기를 숫자를 통해 정의한다.
flex-shrink	요소의 크기를 숫자를 통해 줄여준다.
flex-wrap	요소의 줄 속성을 설정한다.
justify-content	콘텐츠의 가로 축 기준으로 좌우 관계 정렬 상태를 정의한다.
justify-items	콘텐츠의 좌우 관계 정렬 상태를 정의한다.
justify-self	콘텐츠의 좌우 관계 정렬 상태를 정의한다.
place-content	콘텐츠의 좌우 관계 정렬 상태를 정의한다.
place-items	콘텐츠의 좌우 관계 정렬 상태를 정의한다.
place-self	콘텐츠의 좌우 관계 정렬 상태를 정의한다.
order	flex 콘텐츠의 순서를 정의한다.