퍼블리싱을 하다보면 리스트를 많이 보게 된다. 아래와 같은 목록에서, 자녀들 사이의 간격을 8px로 설정하고 싶다면 어떻게 코드를 쓸 것인가?
```markup
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
```
아마도 아래와 같은 코드를 쓸 것이다.
```css
.parent {
div:not(:last-child) {
margin-bottom: 8px;
}
}
```
그런데 만약 자녀들 중 div가 아닌 요소가 들어간다면 위 css는 그 요소에는 적용되지 않는다. 물론 `*:not(:last-child)` 를 사용할 수도 있지만, 아래와 같이 하면 깔끔하다.
```css
.parent {
display: flex;
flex-direction: column;
gap: 8px;
}
```
개인적으로는 `:last-child`, `:first-child` 등을 고려해가며 `margin-bottom`, `margin-right` 등을 쓰는 것보다, `gap`이 직관적이므로 선호한다. `display: grid;`의 경우는 `column-gap`, `row-gap`을 따로 줄 수도 있어 편리하다. 우리가 흔히 레이아웃에 사용하는 `div` 태그의 경우 블록 요소이기 때문에 디폴트가 `display: block;`이지만, 작업을 하다보면 레이아웃의 특정 영역들을 밀고 당기고 해야할 경우들이 생긴다. 그럴 경우 block과 margin을 통한 레이아웃보다는 `display: flex; flex-direction: column;` 하에서 작업하는 것이 편리한 경우가 많다. (e.g. 높이가 고정된 상태에서, 그 컨테이너 내부의 요소들이 동일한 간격으로 벌어지게 하려면 column flex + `justify-content: space-between;`이 정답이다.)