Блок обтекания колонны Flex не растягивается

Question

У меня проблема с переносом столбца во флекс. Мне нужно динамически добавлять контент.

Это может быть 1 или 6 предметов, которые должны быть в центре блока. Поэтому мне нужен гибкий <ul>.

Но когда я использую обтекание столбца и <ul>, я не хочу растягиваться, а <li> - это переполнение. Каждый <li> должен быть выровнен по левому краю. Я не нашел никаких решений, чтобы исправить это до сих пор.

.block {
  max-height: 60px;
  width: 500px;
  background-color: grey;
  display:flex;
  justify-content: center;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column wrap;
  border: 1px solid red
}
li {
  tex-decoration:none;
  list-style:none
}

<div class='block'>
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

Answer 1

Вам нужно flex-direction, чтобы быть столбцом? Если нет, просто установите для <li> значение flex-basis, равное 50%.

.block {
  width: 300px;
  background-color: grey;
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid red
}

li {
  list-style: none;
  flex: 1 1 50%;
  display: flex;
  align-items: flex-start;
  padding: 10px;
  box-sizing: border-box;
}

.color-block {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  margin-right: 10px;
}

<div class='block'>
  <ul>
    <li><span class="color-block" style="background-color:blue;"></span>Tag_name 1</li>
    <li><span class="color-block" style="background-color:red;"></span>Tag_name 2</li>
    <li><span class="color-block" style="background-color:green;"></span>Tag_name 3</li>
    <li><span class="color-block" style="background-color:yellow;"></span>Tag_name 4</li>
    <li><span class="color-block" style="background-color:purple;"></span>Tag_name 5</li>
  </ul>
</div>

Answer 2

Правка, которую я предложил ранее в комментарии, при применении должна выглядеть следующим образом:

.block {
  display:flex;
  width: 500px;
  max-height: 60px;
  margin: 0;
  padding: 0;
  flex-flow: column wrap;
  justify-content: center;
  background-color: grey;
  border: 1px solid red
}

li {
  tex-decoration:none;
  list-style:none
}

<div>
   <ul class='block'>
    <li>Tag_name_1</li>
    <li>Tag_name_2</li>
    <li>Tag_name_3</li>
    <li>Tag_name_4</li>
    <li>Tag_name_5</li>
  </ul>
</div>

Фрагмент ниже выглядит довольно близко к тому, что у вас есть на экране печати.Сгибание повлияет только на непосредственных детей, в данном случае на <li> предметов.Вот почему вам нужно применить класс .block к элементу <ul>.

Подробнее о том, как работает flexbox: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties