CSS2 flex-flow, justify-content 으로 플렉스아이템 배치하기 속성명 속성값 적용 요소 flex-flow [flex-direction] [flex-wrap] 플렉서블 박스 flex-flow 는 [flex-direction] [flex-wrap] 값 두가지를 같이 적어줍니다. 두 속성값 사이에 꼭 한칸을 띄워주셔야해요. justify-content 검정 : 여백 A, B, C : 컨텐츠 : flex-start : flex-end : center : space-between : space-around 각각의 속성값을 넣었을 때의 예시 입니다. 2021. 6. 17. display: flex; 와 flex-direction, 플렉서블박스의 이해 예를 들어 이러한 html이 있다고 가정을 해봅니다. 이렇게 style을 주게되었을 때 부모인 #wrap 을 '플렉서블 박스' , 자식인 box와 box2 는 '플렉스 아이템' 이라고 부릅니다. * flex-direction 값을 주지않고 display: flex; 만 넣어주면 row가 기본값으로 들어가게 됩니다. 플렉스의 방향을 설정 ( flex-direction ) 가로 - 수평(h) - row 세로 - 수직(v) - columm * reverse : 역방향 row-reverse : 우 -> 좌 ex) 1 - 2 - 3 을 row-reverse 주게 되면 3 - 2 - 1 로 배치가 됩니다. columm-reverse : 아래 -> 위 ex) 1 3 2 2 3 을 columm-reverse 주게 되면.. 2021. 6. 16. 이전 1 다음