[CSS3] flex Box - flex-wrap (줄 넘기기 ) && flex-flow (방향 + 줄 넘기기)

안녕하세요 이번에는 flex에서 

flex-wrap ( 줄 넘기기 ) 와  기존에 포스팅 하였던 flex-direction 과 flex-wrap 을 한꺼번에 제어하는

flex-flow ( 방향과 줄넘기기 ) 에 대해서 작성 하려고 합니다.

flex-wrap 

nowrap (default)

wrap

wrap -reverse

flex-wrap 은 컨테이너의 크기보다 아이템들의 크기가 늘어났을 때의 어떻게 동작할 것 인가에 대한 속성 지정입니다.

display: flex 인 flex에서는 flex-wrap으로 지정 합니다.

1. nowrap (Default)

flex-wrap을 지정하지 않은 경우는 기본이 nowrap 입니다. 그렇기 때문에 기본적으로 nowrap 은 위와같이 동작합니다

박스안에 초록 아이템들이 위와같이 있는 상태에서 앞으로 더 추가 될 박스가 있을 경우  점선 박스의 위치로 붙게 됩니다.

- 결과 

2. wrap

wrap으로 지정된 상태에서 노란 박스의 경우 width 가 고정되어있을 시 아래로 줄을 넘기게 됩니다.

- 결과 화면

height 를 고정으로 놓았을 경우의 wrap 결과 화면

3. wrap - reverse

위의 wrap 의 반대 로 줄을 넘기게 된다는 의미의 reverse입니다. wrap의 경우는 우측 아래로 넘기기 때문에

reverse는 좌측 위로 넘기게 됩니다.

- 결과 화면

height 를 고정으로 놓았을 시의 결과 화면

flex-flow

flex-flow는 flex-direction || flex-wrap 형태로 작성되어지는 속성이며

기본값으로는 row 와 nowrap 을 가집니다.

맨위의 nowrap 이 direction 이 row이기 때문에

해당 html 에서 flex-direction 과 flex-wrap 을 제거하고

flex-flow : row nowrap; 으로 작성 하여 테스트 해보았습니다.

flow-flow : flex-direction flex-wrap 형태만 기억하면 되겠네요

flex-flow: row nowrap;

의 형태로 사용됩니다.

- 결과 화면