CodeIt_Sprint/CSS_레이아웃
(2)CSS_레이아웃_2_FlexBox-1-flow-direction 속성
코잼민
2024. 11. 3. 14:30
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를 걸면 된다.
@실제 사용 사례 : ...