CSS flex note

wrap 속성을 이용한 간격을 변수로 잡기

간격을 한쪽의 변수로 둬서 값 하나만 고치면 바뀌게 할 수 있다. (순수 css로 사용가능)

html

<div>
  <ul>
    <li>apple</li>
    <li>banana</li>
    <li>mango</li>
  </ul>
</div>

sass

div {
  ul {
    --gap: 6px;
    padding: 0;
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    margin: calc(-1 * var(--gap)) 0 0 calc(-1 * var(--gap));
    width: calc(100% + var(--gap));
  }
  li {
    margin: var(--gap) 0 0 var(--gap);
  }
}