[#. flex] flex-flow, flex-wrap을 사용해서 flex 아이템 줄 바꿈 설정, 한 줄에 div 개수 지정하기

 

 

 

 

 

 

HTML에서 아래와 같은 구조의 영역이 있을 때 한 줄에 2개의 카드 영역만 배치하려고 한다

1 2

3 4

5

와 같은 형태가 되도록 하고자 한다

 

 

See the Pen Untitled by shab8 (@shab8) on CodePen.

 

 

 

 

 

이때, flex-wrap이나 flex-flow를 사용하면 된다

 

 

 

 

 

flex-wrap 

flex-wrap 속성은 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현 할 것인지 결정하는 속성이다

만약 영역 내에서 벗어나지 못 하게 설정한다면, 동시에 요소의 방향 축(row, column)을 결정할 수 있다

 

flex-wrap: nowrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;

 

 

 

flex-flow

flex-flow 속성은 flex-direction, flex-wrap 속성의 단축 속성이다

 

flex-flow: row wrap;
flex-flow: row-reverse nowrap;
flex-flow: column wrap-reverse;
flex-flow: column wrap;

/* flex-flow: <'flex-direction'> */
flex-flow: row;
flex-flow: row-reverse;
flex-flow: column;
flex-flow: column-reverse;

/* flex-flow: <'flex-wrap'> */
flex-flow: nowrap;
flex-flow: wrap;
flex-flow: wrap-reverse;

 

 

display 속성에 flex 값을 주는 것을 잊으면 안 된다

 

dispay: flex;

 

 

 

 

See the Pen Untitled by shab8 (@shab8) on CodePen.