在一行中显示 fix 4 flex box

Question

主要目标是我想在一个中显示 fix 4 个框 row.I 想像那样显示=>

 <div class="flex-container">
    <div class="flex-row">
        <box></box>
        <box></box>
        <box></box>
        <box></box>
    </div>
    <div class="flex-row">
        <box></box>
        <box></box>
        <box></box>
        <box></box>
    </div>
</div>

我有这样的盒子数组=>

<box *ngFor="let info of infolist;let i = index"></box>

但是这个显示的是那样=>

   <div class="flex-container">
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
   </div>

这是我的 css=>

.flex-container{
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
}

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

如何在一行中显示修复 4 flexbox？

Answer 1

您可以像这样利用块管道：

@Pipe({
  name: 'chunks'
})
export class ChunksPipe implements PipeTransform {
  transform(arr: any, chunkSize: number) {
    return arr.reduce((prev, cur, i) => (i % chunkSize) ? prev : prev.concat([arr.slice(i, i + chunkSize)]), []);
  }
}

使用以下模板：

<div class="flex-container">
    <div class="flex-row" *ngFor="let chunk of infoList | chunks: 4">
       <box *ngFor="let box of chunk">{{box}}</box>
    </div>
</div>

Stackblitz Example

或者您可以重新考虑您的 HTML 结构，并为每个 box.

使用带有 width: 25% 的平面结构

Answer 2

编辑：添加了一个基于浮动的答案。

box {
  display: block;
  height: 100px;
  width:100px;
  background-color: lightgreen;
  border: 1px solid black;
  float: left;
}

box:nth-child(4n + 1){
  background-color: lightblue;
  clear: both;
  clear: left;
}

<div class="flex-container">
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
  <box></box>
</div>

关键是根据可用宽度计算宽度。这可以通过 width: calc(100% /4);.

来完成

注意：box-sizing: border-box; 如果您要提供任何边框，这很重要。在其他 box-sizing 中，边框将添加到您的宽度中，上面的计算将不起作用。

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
}

box {
  box-sizing: border-box;
  width: calc(100% /4);
  height: 100px;
  background-color: lightgreen;
  border: 1px solid black;
}

<div class="flex-container">
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
     <box></box>
   </div>

在一行中显示 fix 4 flex box

Show fix 4 flex box in one row

css

angular

flexbox

ngfor