플랙스 gap

🎨 Flex에도 Grid와 같이 gap(여백)을 쓰자

CSS Flex gap 예전에는 flex box를 사용할때, 각 item들의 사이 공간을 주기 위해서는 margin을 사용해야 했다. 하지만 margin 과 gap의 차이점은 margin은 무조건 여백을 줘서 불필요한 공간을 만들지만, gap의 경우 엘리먼트 요소들의 사이에 인접한 요소가 있을때만 공간(space)을 만들기 때문에 훨씬 모던하다. 하지만 이제 flexbox도 grid와 같이 gap를 사용할 수 있게 되었다. 문법은 그리드와 완전히 판박이니 그대로 사용하면 된다. gap: [상하좌우 전체의 값]; gap: [상하 사이의값] [좌우 사이의값]; 동일한 여백 주기 1 2 3 4 5 6 7 8 9 .test-parent { display: flex; flex-wrap: wrap; gap: 10p..

인파_

2021.10.17