목록CSS/Flexbox (1)

data life

CSS - flex-grow, flex-shrink

flex-grow 남는 행의 여백을 나눠서 채우는 방법으로 flex-grow 속성이 적용되지 않거나 속성 값이 0 인 경우 레이아웃 너비보다 item들의 너비 합이 더 작으면 아이템 우측 끝에 여백이 남게 된다. HTML 1 2 3 css .flex_box{ display: flex; flex-wrap: nowrap; gap: 0; padding: 10px; background-color: #e8e8e8; } .item{ min-height: 150px; flex-basis: 100px; } .item:nth-child(1){ background-color:beige; } .item:nth-child(2){ background-color: yellowgreen; } .item:nth-child(3){ b..
CSS/Flexbox 2022. 11. 16. 23:01
이전 Prev 1 Next 다음