CSS 行作为网格布局

Question

当前的：

.parent {
display: flex;
justify-content: center;
align-items: center;
}

.childs { #class for every child
  flex: 1 1 100%;
}

好的例子：

如何使用 flex box 实现这一点？

所以当我添加新行时，它不会像这样：（坏例子）

Answer 1

也许你可以使用 flex-shrink = 0 它使你的盒子不可收缩

Answer 2

flex 是一种相当一维的布局机制。

如果允许，您可以考虑使用网格来代替可以使用模板布置单元格的位置，并且单元格的尺寸由网格定义设置，而不是由任何一个单元格的内容设置。

这将是您的模板布局：

  'A B'
  'A B'
  'C B'
  'C D'
  'C D'
  '. D';

 .grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'AB' 'AB' 'CB' 'CD' 'CD' '. D'; gap: 1vw; width: 50vw; aspect-ratio: 5 / 2; background: black; padding: 1vw; }.grid>* { border: red solid 2px; }.grid>div:nth-child(1) { grid-area: A; }.grid>div:nth-child(2) { grid-area: B; }.grid>div:nth-child(3) { grid-area: C; }.grid>div:nth-child(4) { grid-area: D; }

 <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>