CSS - свойство Flex

Question

Эй, ребята, мне нужно создать список текста, который должен быть выровнен по горизонтали.Задача состоит в том, чтобы не указывать ширину или границу, зазор каждого li должен быть одинаковым.И это должно быть отзывчивым.то есть, в каком-то разрешении, если все li не могут оставаться горизонтально, они должны автоматически сломаться и упасть.Это возможно с помощью flex?

ul {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: inherit;
}

ul li {
  display: block;
  flex: 0 1 auto;
  float: none;
  margin-top: 0;
  width: auto;
  list-style-type: none;
  padding: 0;
}

<ul>
  <li> We identify unmet user </li>
  <li> We identify unmet </li>
  <li> We identify </li>
  <li> We identify unmet </li>
</ul>

Answer 1

Да, это возможно.Вы должны использовать flex-direction: row для горизонтального и flex-wrap: wrap, и он идет на 2-3 строки, если необходимо.

Если вы хотите flex-direction: column - вертикальный - на небольших экранах просто используйте @media only screen and (max-width: 600px) - max-width или min-width в зависимости от того, что вам нужно.

Ох, забыл .. для равных spacing вы можете использовать justify-content: space-between

Answer 2

Да, вы можете использовать display: flex; для этого.

Не забудьте применить flex-wrap: wrap к родителю и установить min-width для детей.

https://codepen.io/blackcityhenry/pen/gZpNba

Answer 3

Просто добавьте flex-wrap: wrap;, и элементы li должны иметь некоторую ширину