css 헷갈리거나 잊기쉬운 속성 정리

Flex

1. flex: grow shrink basis

flex를 쓸 때 다른 속성들보다 쉽게 잘 안써지는 속성이면서 잘 기억에 남지 않는 기본 속성들인 grow, shrink, basis

속 성	의 미
grow	남는 공간을 항목들에게 분배하는 비율. flex-basis보다 커지며, 클수록 많은 여분 공간 차지함
shrink	남는 공간이 부족할 때 각 항목의 사이즈를 줄이는 비율. flex-basis 보다 작아지며, 클수록 더 빨리 줄어듬
basis	flex항목이 넓어지거나 좁아질 때 고려하는 기준

2. fr: 남는공간을 분할하는 단위

3. auto: 남는공간 중 최소한으로 차지할 수 있는부분 차지하기

4. grid

그리드는 flex보다 좀 더 복잡하고 기억하기 쉽지 않지만 훨씬 많응 용도로 사용가능하다.

4-1. grid-template

grid-tempate-rows / grid-template-columns 의 축약형

4-2. auto-fit

남은 공간이 있다면 자식 요소들이 basis 너비보다 커져서 부모요소의 공간을 꽉 채운다.

basis보다 남은 공간이 작을경우 아래로 떨어진다.

4-3. auto-fill

남은 공간이 있어도 자식 요소들이 basis 너비보다 커지지 않는다.

basis보다 남은 공간이 작을경우 아래로 떨어진다.

4-4. minmax(150px, 1fr)

media 쿼리 없이 반응형 layout을 형성할 수 있도록 최소 최대값을 설정.
보통 min값을 고정형으로 하고 max를 상대값으로 결정하자
minimum and maximum value to enable responsive desing without media queries for grid layout

5. etc

5-1. clamp(min size, preferred value, max size)

단위는 어떤 것도 올 수 있다. 보통 preferred value는 상대적인 값(%,vw)으로 한다. 이 함수는 max(min, min(val, max))랑 같은의미이다.

즉 min(val, max): preferred value가 min보다 작으면 min. max 보다 작으면 min(val, max), 그 이상이면 max