Flexbox, который оборачивается вокруг фиксированного контейнера

Question

Я пытаюсь создать форму с переменным количеством полей формы, которые будут расширяться по горизонтали. Каждое поле будет иметь минимальную ширину 300 пикселей, но будет расширяться, чтобы заполнить строку, если есть дополнительное пространство. Если для каждого поля в 300px недостаточно места, оно будет перенесено в другой ряд. Flexbox был бы идеальным решением для этого. Тем не менее, я также хочу, чтобы был контейнер переменной ширины для кнопок отправки и отмены, который зафиксирован с правой стороны первого ряда. (См. Прилагаемую иллюстрацию.)

Как я могу создать этот фиксированный, выровненный по правому краю контейнер, по которому будет перемещаться Flexbox? Можно ли это сделать только с помощью Flexbox? Будет ли здесь полезна CSS Grid (или комбинация Flexbox и Grid)? Пример кода будет оценен.

Answer 1

После некоторых экспериментов я обнаружил, что это возможно с помощью CSS Grid. Вот основной макет:

HTML:

<div class="auto-fit">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
  <div class="D">D</div>
  <div class="E">E</div>
  <div class="F">F</div>
  <div class="G">G</div>
  <div class="H">H</div>
  <div class="I">I</div>
  <div class="J">J</div>
  <div class="K">K</div>
  <div class="L">L</div>
  <div class="M">M</div>
  <div class="buttons"><button>Submit</button><button>Cancel</button></div>
</div>

CSS:

div.auto-fit {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;  
}

div.auto-fit > div {  
  background-color: #fff;  
  border-radius: 3px;  
  padding: 15px;  
  font-size: 14px;
}

div.buttons {
  grid-column: -1/-2;
  grid-row: 1/2;
}

Вот jsfiddle, который показывает его в действии: https://jsfiddle.net/lobo78/5ufqdm4y/22/

Answer 2

Я думаю, что ваше лучшее решение - использовать float и inline-block. тогда вы можете настроить размер с учетом медиа-запроса

body>.container {
  background-color: #FFFFFF;
  margin: auto;
  margin-top: 24px;
  padding: 0px;
}

.container {
  border: solid 1px #F00;
  font-size:0;
}

.box {
  box-sizing: border-box;
  border: 1px solid #000;
  text-align: center;
  vertical-align: middle;
  min-height: 36px;
  width: calc(25% - 10px);
  min-width: 200px;
  display:inline-block;
  margin: 5px;
  font-size:initial;
}

.box.buttons {
  float:right;
}

<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.4" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css" />

<div class="container">
  <div class="box buttons">
    <button>Submit</button>
    <button>Cancel</button>
  </div>
  <div class="box a">Box A</div>
  <div class="box b">Box B</div>
  <div class="box c">Box C</div>

  <div class="box e">Box E</div>
  <div class="box f">Box F</div>
</div>