Почему не отображается первая ссылка (column-span)?

Question

[Анатолий]

В хроме и Опере не вижу первую ссылку, как исправить?
https://codepen.io/workcode/pen/XWdarzX

a { outline: none; color: SteelBlue; font-family: Arial; }
.knowledge_base { column-width: 150px; column-gap: 5px; }
h2 { column-span: all; }

<section class="knowledge">
  <h1>База знаний</h1>

  <ul class="knowledge_base">
    <li><a><h2>Начало</h2></a>
      <ul>
        <li><a href="#">Знание 1</a></li>
        <li><a href="#">Знание 2</a></li>
        <li><a href="#">Знание 3</a></li>
        <li><a href="#">Знание 4</a></li>
      </ul>
    </li>
  </ul>
</section>

Answer 1

[xdevelx]

Уберите css columns для .knowledge_base { column-width: 150px; column-gap: 5px; } и добавьте display: flex для вложенных списков.
css columns здесь вообще не в тему, все решается флексами.

Comments

[Анатолий]

Заменяю .knowledge на display: flex;
Получаю:


Мне вроде не такое решение нужно, а какое есть, только чтобы глюка не было с отображением первой ссылки.

Заголовок "Начало" должен занимать всю ширину.

[xdevelx]

Анатолий, Я сказал применить flex к вложенным спискам, а не к .knowledge_base

.knowledge_base ul {
  display: flex;
}

[Анатолий]

xdevelx, ну да на флексах можно получить тоже самое.
А про column-span all можно забыть? Я поискал в Интернете, но ничего про этот баг не нашел. Не совсем понятно, он только у меня или column-span all никто не использует?

[xdevelx]

Анатолий, у вас по сути в списке только 2 пункта, все остальное вложенные элементы. Для такой структуры css columns не прокатит. Чтобы вложенные элементы выстроить в линию достаточно и flex.

[Анатолий]

xdevelx, ну так у меня проблема только в первом элементе.

Для такой структуры css columns не прокатит.

Не совсем понял.

[xdevelx]

Анатолий,

Не совсем понял.

Вот и я не понял, зачем css columns вообще нужен для решения вашей задачи?

[Анатолий]

xdevelx, я с Вами полностью согласен, что задачу можно решить в том числе флексами.
Но мне важно понять, почему не работает мой пример. Толи я делаю что-то не то, или хром не поддерживает такое решение. Если Вы считаете, что проблема в браузере, то желательно ссылку на источник.
Если Вас не устраивает мой пример, можете предложить свой. Мне главное понять, насколько интересен мне будет этот (column) инструмент в будущем.
Я так понимаю, что Вы считает, что column нужно применять для "газетных простыней", но ведь это не исключает заголовок на всю ширину, как в моем примере.

[xdevelx]

Анатолий, Columns был бы нужен, если бы у вас был список из множества элементов и их нужно было разделить на колонки. У вас список только с двумя элементами. Все остальные вложенные. С такой структурой колонки не работают. Они нужны только для линейной структуры, то есть для множества последовательных элементов.
https://habr.com/ru/post/469395/

[Анатолий]

xdevelx, ага я эту статью как раз и читал.
Мне нужно тоже самое https://www.donarmuseum.nl/spelers/
поэтому я и решил использовать column.
Пострел еще раз этот сайт и не нашел там свойство column-span, т.е. реализация на сайте тоже с помощью flex?

[Анатолий]

Ладно, тему закрываю, пошел переделывать на флексы.
Спасибо.