Flexbox

Question

我有一个简单的 div，其中包含两张垫卡。以下是 div 和 div 内卡片的 CSS 属性：

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

mat-card {
  margin: 10px;
  width: 45%;
  min-width: 300px;
}

这里是重现问题的示例 HTML 模板：

<div class="cards">
  <mat-card>
    <mat-card-header>
      <mat-card-title> Card 1 </mat-card-title>
    </mat-card-header>
    <mat-card-content>
      Name: Test 1 <br />
      Type: Type 1 <br />
      Property 1: 1 <br />
      Property 2: 2 <br />
      Property 3: 3 <br />
    </mat-card-content>
  </mat-card>
  <mat-card>
    <mat-card-header>
      <mat-card-title> Card 2 </mat-card-title>
    </mat-card-header>
    <mat-card-content>
      Name: Test 2 <br />
      Type: Type 2 <br />
      Property 1: 1 <br />
      Property 2: 2 <br />
      Property 3: 3 <br />
    </mat-card-content>
  </mat-card>
</div>

我希望每张卡片占该行的 50%。如果卡片的最小宽度太大，无法将两张卡片都放入行中，则 div 内容应该换行，因此卡片现在彼此下方。环绕后，每张卡片应填充可用宽度的 100%。

在我当前的 CSS 布局中，内容换行的方式太早了，而且我似乎也无法将每张卡片的宽度设置为 50%，因为这会导致它立即换行。这是一个说明问题的stackblitz： StackBlitz

如何获得所需的行为？

Answer 1

只需将width: 45%更改为flex-grow: 1，弹性项目将尝试占据整行。 flex-basis 控制它们相对于彼此的大小，默认情况下它们将尝试保持相同的大小。由于 16px 的填充，目前它们在 332px 换行。

mat-card {
  margin: 10px;
  min-width: 300px;
  flex-grow: 1;
}

Flexbox - 如何在两个元素之间拆分行 50/50 并在宽度低于最小宽度时换行？

Flexbox - How to split row 50/50 between two elements and wrap if width falls below min-width?

css

angular-material

angular