뒤늦게 알아서 뼈아픈 유용한 CSS : gap (flexbox)

맨날 flex 줘놓고도 margin-right 주고 nth-child에 margin-right:0주는 식으로 작업해왔는데, 요게 물건이다. margin-right 주고 삭제하고 할 필요 없음. 반응형도 거뜬하다.

사파리 등 브라우저들의 이전버전에서는 지원 안한다니 참고. (아래 지원 안하는 브라우저에서 쓰는 방법 참고)

/* 단일 <length> 값 */
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/* 단일 <percentage> 값 */
gap: 16%;
gap: 100%;

/* 이중 <length> 값 */
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* 이중 또는 혼합 <percentage> 값 */
gap: 16% 100%;
gap: 21px 82%;

/* calc() 값 */
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/* 전역 값 */
gap: inherit;
gap: initial;
gap: unset;

---

호환성 : 사파리 14 이하, 엣지 83 이하 등 지원 안됨

지원안되는 브라우저에서 flex gap 사용하는 법 : https://nosleepjavascript.com/flex-gap-in-unsupported-browsers/