Flexbox - отображать список по вертикали вместо переноса

Question

У меня есть простой список flexbox, как этот ...

ul {
  display:flex;
  
}

li {
  background:red;
  padding:10px;
  margin:10px;
  list-style:none;
}

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

Если недостаточно места для отображения списка по горизонтали, я бы хотел, чтобы он отображался вертикально.

Есть ли способво flexbox, чтобы он отображал вертикально вместо переноса, когда недостаточно места?

Answer 1

Используйте этот трюк

ul li:nth-last-child(n+6):first-child,
ul li:nth-last-child(n+6):first-child ~ *{
  // set new style in case you have 5 li or more
}

Рабочий код

ul {
    display: flex;
    flex-wrap: wrap;
}

li {
  background:red;
  padding:10px;
  margin:10px;
  list-style:none;
  }
ul li:nth-last-child(n+6):first-child,
ul li:nth-last-child(n+6):first-child ~ *{
    flex: 1 1 100%;
}

<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

<h1>Same style with 5 items or less</h1>
<ul>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
  <li>List Item 4</li>
  <li>List Item 5</li>
</ul>

Answer 2

Используйте медиа-запросы для установки различных свойств на разной ширине и играйте в игру на https://flexboxfroggy.com/, чтобы освоить flexbox.

Чтобы сгенерировать медиа-запрос для определенного разрешения экрана, посетите

http://giona.net/tools/css3-mediaquery-generator/ 

Надеюсь, это поможет

Answer 3

Я предлагаю вам использовать медиазапросы вместе со свойством flex direction.

изменить направление изгиба тега ul с помощью медиазапроса

ul {
   display: flex;
   @media (max-width: <Xpx>){
     flex-direction: column
   }
}

Xpx - положение, в котором вы хотите расположить его вертикально.