CodeIt_Sprint/CSS_레이아웃14 (3)CSS_레이아웃_2_FlexBox-2-justifiy-content,align-item 속성 2-justifiy-content,align-item＃Default 상황 :display : flexDiv Container > Div RedBox, GreenBox, BlueBox＃알아야 할 개념 :● 개념1_ fiex-direction에 따라 진행축(Main-Axis), 교차축(Cross Axis) 이 있다.①. Flex-direction : row (왼쪽 -> 오른쪽)의 진행축, 교차축②. Flex-direction : column (위 -> 아래)의 진행축, 교차축○ 결론 :Flex - dirction 의 진행축 == Main Axis● 개념2_ justify-content 속성 , align-items 속성 :justify-content 속성 => Main-Axis(진행축)방향의 요소들 배치.. 2024. 11. 3. (2)CSS_레이아웃_2_FlexBox-1-flow-direction 속성 1_ display : flex + flex-direction＃Default 상황 : display : staticDiv 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 .. 2024. 11. 3. 이전 1 2 3 4 다음
