Как сделать три колонки на flex?

Question

[QnaTwitt]

Как на flex сделать три колонки, как на скрине? На скрине использовал column-count, но мне нужны gap для расстояния между ними, по этому не подходит такой вариант, нужно на flex...

HTML

<div>
  <span>text text text</span>
  <ul>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
    <li>
      <a href="/">text</a>
    </li>
  </ul>
  <button>
    <p>teeext</p>
    <i className="icon icon-arrow"></i>
  </button>
</div>

Comments

[Вадим]

гугл что, молчит?

[Ankhena]

Ну и используйте column-gap, не поняла в чем вопрос.

[QnaTwitt]

Ankhena, Как я с помощью column-gap сделаю 3 колонки?

[Ankhena]

QnaTwitt, вы в состоянии флексом сделать три колонки флексами?

[QnaTwitt]

Ankhena, Да, если эти li оберну например в три дива, как отдельные блоки, и напишу display: flex
Но так сделать я не могу, так как я вывожу их через map() динамически, и этих li может быть разное количество...

[Froggyweb]

QnaTwitt, flex-wrap: wrap; Но я бы сделал через грид, или таблицу если это таблица

[Ankhena]

QnaTwitt, я вообще не понимаю проблему.
Нужны 3 колонки. Вы можете их сделать. Но нужен gap.
Так почему вы не можете его задать-то?

Если что, li нельзя оборачивать в div.