html - 在 flex 上有两行。我怎样才能使一个相对比另一个大？

Question

如果我在一个 flex 行中有两个元素（我的意思是列），我可以使用 CSS 中的“flex”属性使一个相对大于另一个。像这样的东西

.flexContainer {
  display:flex;

   .column1 {
      flex: 2;
   }

   .column2 {
      flex : 5;
   }
}

这样，column2 将大于该行中的第 1 列。

我试图做同样的事情，但不是列，而是行。像这样的东西：

.flexContainer {
 display:flex;
 flex-direction:column;

   .row1 {
     flex:2;
    }

    .row2 {
       flex:5;
     }
}

但行具有相同的高度。如何使 row2 相对大于 row1？（相对于屏幕高度）

标签： htmlcssflexbox

Answer 1

不知道 flex 是否为此内置了任何内容，因为它完全取决于您将提供的内容。所以：

1. 您可以提供额外的填充以.row2产生不同高度的错觉。
2. 您可以改为使用display: grid和创建您想要的行数，对于任何给定的行，使用grid-row它来让它消耗两行而不是一行的空间。

例如，通过这个，您告诉带有类的行row2消耗第 2 行和第 3 行的空间，给它您正在寻找的高度差异。

.row2 {
  grid-row: 2/span 3;
}

更多信息在这里。