Согните элементы в два ряда при необходимости

Question

Это может быть невозможно сделать строго с flexbox или может потребовать некоторых медиа-запросов.Я в порядке с этим.Мне интересно, есть ли способ расположить четыре элемента по горизонтали в одном ряду, которые будут быстро переключаться на два столбца с двумя элементами.

Я пробовал разные способы сделать это, например:

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
button {
  width: 250px;
}

<div class="flex-container">
  <button>a</button>
  <button>b</button>
  <button>c</button>
  <button>d</button>
</div>

Это работает нормально, но если вы уменьшите ширину экрана, он будет перенесен на три элемента в первой строке и один элемент во второй, пока вы не уменьшите ширину доменьше ширины трех предметов.Если ширина экрана становится слишком маленькой, чтобы все четыре элемента располагались горизонтально, я бы хотел, чтобы это было два столбца и два ряда элементов.

У меня есть некоторый контроль над шириной каждого элемента в строке,но они будут относительно маленькими, как кнопки (возможно, максимум 200 пикселей).

Возможно ли это сделать с flexbox?Если нет, есть ли лучшая альтернатива переносу в соответствующую сетку?

Answer 1

Одна идея без медиазапроса - использовать дополнительную обертку для кнопки, как показано ниже:

.flex-container,
.flex-container > div{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

button {
  width: 250px;
}

<div class="flex-container">
  <div>
    <button>a</button>
    <button>b</button>
  </div>
  <div>
    <button>c</button>
    <button>d</button>
  </div>
</div>

Answer 2

Если ширина каждой кнопки остается неизменной, вы можете просто установить max-width контейнера на эту ширину, умноженную на (максимальное) количество кнопок, которое вы хотите в каждой строке.

См.это codepen .