(CSS) flexbox 2탄 : flex-flow, align-content, order 사용법

 

 

이전에 flex box에 대해 다루었다. 

 

물론 flex box를 사용할 때 가장 많이 사용되는 것이 justify-content와 align-item이지만,

 

이 이외에도 사용되는 것들을 추가로 설명하고자 한다. 

 

(CSS) flexbox 1탄 : justify-content, align-items, flex-direction, flex-wrap 사용법

 

 

 

flex-flow

flex-flow는 flex-direction과 flex-wrap을 한꺼번에 같이 사용할 수 있는 단축 속성이다.

 

앞에는 flex-direction, 뒤에 flex-wrap을 적으면 한 번에 적용된다.

 

ex) flex-flow: (flex-direction값) (flex-wrap값);

.div1{
	flex-direction: column;
	flex-wrap: wrap;
}

.div2{
	flex-flow: column wrap; /*한 라인으로 단축할 수 있다.*/
}

 

 

 

align-content

align-content는 여러 줄인 flex-box에만 효과가 있는 속성이다. 즉 flex-wrap: no-wrap;인 경우 아무 효과가 없다.

 

align-content는 두줄 이상의 콘텐츠 사이의 공간을 배치하는 방식을 결정한다. 

• flex-start: 컨텐츠들을 start에 정렬한다.
• flex-end: 콘텐츠들을 end에 정렬한다.
• center: 컨텐츠들을 중앙에 정렬한다.
• space-between: 컨텐츠들 사이에 동일한 간격을 두고 정렬한다.
• space-around: 컨텐츠 주위에 동일한 간격을 두고 정렬한다.

 

 

 

order

order을 flex-box의 자식 즉 flex-item에게 주면, 해당 order의 순서에 따라 item을 배치하게 된다.

 

order의 기본값은 0이며, order의 값이 작을수록 앞에 배치된다. (음수도 사용 가능하다)

 

See the Pen align-content by 김다영 (@xnpzlttb-the-solid) on CodePen.

 

 

 

다음에는 3탄으로 flex-grow, flex-shrink, flex-basis를 정리하려고 한다.