(2)CSS_레이아웃_2_FlexBox-1-flow-direction 속성

1_ display : flex + flex-direction

＃Default 상황 :

• display : static
• Div Container > Div RedBox, GreenBox, BlueBox

＃알아야 할 개념 :

• 큰 Box 안에 작은Box들(요소들)의 배치 방향을 정하는 속성 

=> 큰 Box(Container)을 display : flex , flex-direction 속성의 속성값 : row,row-reverse, column ,column-reverse

＃display : flex + flex-direction  : row => 왼 → 오른쪽으로 배치된다. 

// display : flex의 Default 값이다.

 

＃display : flex + flex-direction  : row-reverse => 오른쪽 → 왼쪽 (Blue , Green , Red)으로 배치된다. 

＃display : flex + flex-direction  : column => 위 → 아래으로 배치된다. 

＃display : flex + flex-direction  : column => 아래 → 위 (Blue, Green , Red)으로 배치된다. 

 

※연습문제

요구하는 출력상황

문제 상황

해결방법 :

저 4개의 음악항목을 감싸는 Container Box인 playlists div에 display : flex + flex - direction : row를 걸면 된다.

 

@실제 사용 사례 : ...