Отображать максимум n элементов одинакового размера одинаково подряд с flexbox

Question

Я хочу отобразить максимум определенное количество, например, 3 элементов (например, div элементов) в строке, и все эти элементы должны всегда иметь одинаковую ширину относительно друг друга, но ширина должна быть гибкой, когдаизменение размера.Порядок элементов должен быть слева направо.Я хочу использовать Flexbox.

Например, я хочу отобразить максимум 3 элемента подряд, а если у меня есть 4 элемента, то первые 3 элемента будут отображаться в строке слева направо,Четвертый элемент находится во втором ряду слева.

Лучшее, что я мог сделать, это https://jsfiddle.net/r6f5Ltag/3/

.flex-row-container {
    background: #aaa;
    display: flex;
    flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.flex-row-container > .flex-row-item {
    flex-grow: 1;
  flex: 1 1 30%;
    height: 100px;
  max-width: 200px;
  float: left;
}

.flex-row-item {
  background-color: #fff4e6;
  border: 1px solid #f76707;
}

Но, как вы можете видеть, элементы центрированы и ширинапо отношению друг к другу не всегда остаются одинаковыми по отношению друг к другу.

Answer 1

В основном вот общий ответ:

.container {
    display: flex;
    flex-wrap: wrap;
}

.container > div {
    width: calc(100% / 3);
}

Измените ширину: calc(100% / 3);, если вы хотите изменить количество элементов в строке (например, 3 - текущее количество элементов).Добавьте flex-grow: 1;, чтобы элементы расширялись до границ (только если в строке меньше элементов, чем предполагалось).

Answer 2

если вы хотите иметь одинаковую ширину и гибкость, вы должны выбрать процент для ширины.поэтому вместо "max-width: 200px;"используйте "max-width: 33%", и если вы хотите, чтобы четвертое поле во второй строке начиналось слева, вы можете установить: "justify-content: flex-start;"

  .flex-row-container {
    background: #aaa;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
  .flex-row-container > .flex-row-item {
    flex-grow: 1;
    flex: 1 1 30%;
    height: 100px;
    max-width: 33%;
  }

  .flex-row-item {
    background-color: #fff4e6;
    border: 1px solid #f76707;
  }

Answer 3

Делаем ваш код более понятным и легким для чтения.

.css

.flex-row-container {
    background: whitesmoke;
    display: flex;
    flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.flex-row-item {
  flex-grow: 1;
  height: 100px;
  background-color: #fff4e6;
  border: 1px solid #f76707;
  width: calc((100%/3) - 2px); 
}

.flex-row-item:last-child() {
    flex-grow: 0;
 }

В этой части width: calc((100%/3) - 2px); это удалить какое-то странное поле, может бытьдобавление.

Я порекомендую вам использовать синтаксис sass или scss для обработки этого.

Answer 4

Это все, что вам нужно.https://jsfiddle.net/nemanjaglumac/72y6kfrg/1/

Нет необходимости во вложении выбора класса с помощью селектора >.

.flex-row-container {
  background: #aaa;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-row-item {
  flex-grow: 1;
  height: 100px;
  background-color: #fff4e6;
  border: 1px solid #f76707;
  width: calc((100%/3) - 2px); /* divide by the number of elements and substract the width od the borders */

  &:last-child {
    flex-grow: 0;
  }
}

PS Имейте в виду, что это синтаксис SCSS (вложенность с &).Это будет выводить как .flex-row-item:last-child {...}

РЕДАКТИРОВАТЬ: На самом деле, flex-grow является избыточным в этом конкретном примере.Потому что мы уже определяем ширину этих элементов.Итак, нижняя строка, вы можете написать это еще короче, как:

.flex-row-container {
  background: #aaa;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-row-item {
  height: 100px;
  background-color: #fff4e6;
  border: 1px solid #f76707;
  width: calc((100%/3) - 2px);
}