11. Flex box (4)

9) flex-wrap

창 크기가 변해도 한 줄에 모든 박스가 위치한 모습

flex-wrap-nowrap;을 하여 한 줄에 모든 박스가 위치 할 수 있도록 함.

창 너비에 비해 박스의 너비가 넓더라도 박스의 너비를 줄여 같은 줄에 있도록 함.

 

 

창 크기가 변하자 창 크기를 벗어나는 박스가 아래로 밀려난 모습

flex-wrap-wrap;을 하게 되면 창 너비를 벗어나는 박스는 아래로 밀려나서 위치하게 함.

 

 

 

10) 박스 역순으로 배치하기

박스를 구분하기 위해 색을 변경함

역순으로 배치하기 전 숫자의 위치만 변경이 되는지,

박스 전체가 변경되는지 확연하게 보이도록 박스의 색을 다 다르게 해주었음.

 

 

박스의 숫자가 123에서 321순으로 변경됨

flex-direction: row-reverse;를 하여 수평으로 박스를 놓고

수평으로 놓여있는 블럭을 역순으로 배치함.

 

 

박스의 숫자가 123에서 321순으로 변경됨

flex-direction: column-reverse;를 하여 수직으로 박스를 놓고

수직으로 놓여있는 블럭을 역순으로 배치함.