🖌 CSS (2) 썸네일형 리스트형 ✏ flex css / direction, wrap, align-items, justify-content container에 주어지는 속성 🟣 flex-direction(방향 설정) : row / row-reverse / column / column-reverse 🟣 flex-wrap(줄바꿈 속성) : nowrap / wrap / wrap-reverse 🟣 align-items(수직 방향으로 위치 설정) : flex-start / flex-end / center / stretch stretch = 기본값 container가 flex가 되는 순간에 item들은 container의 높이값과 같아짐 item들이 stretch 상태가 됨(쫙 펴진다라고 생각하면 쉽다 !) 🟣 justify-content(수평 방향으로 위치 설정) : flex-start / flex-end / center / space-between.. ✏ flex css / direction, grow, basis, shrink 1 2 3 4 5 6 7 8 9 1 2 3 4 5 cs display: flex를 쓰기 위해서는 반드시 부모요소와 자식요소가 있어야 함. 1️⃣ flex-direction: row / row-reverse / column / column-reverse 1 2 3 4 5 6 7 8 9 10 11 .container { background-color: lavender; } .item { background-color: green; color: #fff; border: 1px solid #fff; } Colored by Color Scripter cs ✔ 부모인 container 클래스와 자식인 item 클래스에 배경 등 색상만 넣어줬을 때 = 기본값인 수직, 순서대로 정렬 1 2 3 4 5 6 7 8 9 1.. 이전 1 다음
