CodeIt_Sprint87 (4)CSS_레이아웃_2_FlexBox-3-flex-wrap 속성, 4-display : flex + gap 속성 3-flex-wrap＃Default 상황 :display : flexDiv Container > Div 8개의 요소 =>핵심은 : 부모 Box의 크기를 넘어간 요소들이 배치된 상황＃알아야 할 개념 :● 개념_ flex-wrap 속성 ○ 정의 : 요소 Box들이 부모 Box의 크기를 넘어서는 상황일 때, flex - wrap : wrap을 부모 Box의 CSS에 적용하면,=> Main-axis 축이 하나 더 추가하여 배치한다.=> 주의 : 기존 Main-axis의 요소들은 꽉 채워지게 되진 않는다.①. Flex-direction : row (왼쪽 -> 오른쪽)에서 flex-wrap : wrap 상황 :②. Flex-direction : column 에서 flex-wrap : wrap 상황 : 4 - d.. 2024. 11. 3. (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 ··· 19 20 21 22 다음
