Html CSS Flex：如何在Flex行中获得相等的高度_Html_Css_Flexbox

Html CSS Flex：如何在Flex行中获得相等的高度

html css

Html CSS Flex：如何在Flex行中获得相等的高度,html,css,flexbox,Html,Css,Flexbox,我在获得具有相同柱高度的柔性布局时遇到了一些困难。我有一个container.row容器，其中包含一些rows.flex row。这些行包含一些不同长度的内容。我希望所有行的高度都相等。就我对flex的理解而言，我必须在parent.row容器中设置flex:display和flex方向，在children.flex行中设置flex-grow:1。但是，行的高度不相等，请参见此。有什么想法，或者是关于如何使这项工作的解释吗 .行集装箱{ 显示器：flex；弯曲方向：立柱；高度：300px；

我在获得具有相同柱高度的柔性布局时遇到了一些困难。我有一个container.row容器，其中包含一些rows.flex row。这些行包含一些不同长度的内容。我希望所有行的高度都相等。就我对flex的理解而言，我必须在parent.row容器中设置flex:display和flex方向，在children.flex行中设置flex-grow:1。但是，行的高度不相等，请参见此。有什么想法，或者是关于如何使这项工作的解释吗

.行集装箱{ 显示器：flex；弯曲方向：立柱；高度：300px；宽度：75%；边框：1px纯蓝色； } .弹性行{ 边框：1px纯黑；柔性生长：1；显示器：flex；背景颜色：黄色；对齐项目：居中； } .col包装器{} .col-1， .col-2{ 边框：1px纯绿色； } 上校：对{ 左侧填充：10px； } X 一些内容 XXX 一些较长的内容 aa-ab Amet illo digito facilis blanditiis别名。请解释一下，你是如何看待我们的工作的？Accusantium ipsa iusto velit中的Accusantium？我不知道该怎么做 .flex行>*{height:100px；} 类似这样的东西？

.flex row>*{height:100px；}

类似这样的情况？

这里有一点奇怪的行为，但实际上您只需要在行上设置一个高度，即使该高度为0。试一试

.flex-row {
    height: 0;
}

这里有一点奇怪的行为，但实际上您只需要在行上设置一个高度，即使该高度为0。试一试

.flex-row {
    height: 0;
}

诀窍是将所有flex items.flex行设置为具有相同的基线高度，并允许它们彼此相等地增长

e、 g

为了更容易理解：

.flex-row {
   flex-grow: 1;
   flex-basis: 0;
   flex-shrink: 0; //not needed anyway because you have a base height of 0, so they'll never need to shrink
}

但是，如果三个flex行的内容定义高度高于行容器的300px，那么您就有风险，然后，每行的高度将为100px，内容可能会溢出.flex行。诀窍是将所有flex项.flex行设置为具有相同的基线高度，并允许它们彼此平等地增长

e、 g

为了更容易理解：

.flex-row {
   flex-grow: 1;
   flex-basis: 0;
   flex-shrink: 0; //not needed anyway because you have a base height of 0, so they'll never need to shrink
}

但是，如果三个flex行的内容定义高度高于行容器的300px，那么您就有风险，然后，每一行的高度将为100px，内容可能会溢出。flex行的工作方式是这样的：它占用可用空间并仅在应用flex basis（当auto从宽度或高度获取其值时）后分配，在当前情况下，它的高度是由于flex direction:column。在当前情况下，“弹性基准”是自动的，因为高度也是自动的。如果应用flex basis后没有剩余的可用空间，flex grow将无法工作

因此，这里有几个选项：设置高度：0或设置弹性基准：0。此外，您可能需要最小高度：0，因为在某些情况下，最小高度：自动不允许flex项占用的空间小于其内容

演示：

.行集装箱{ 显示器：flex；弯曲方向：立柱；高度：300px；宽度：75%；边框：1px纯蓝色； } .弹性行{ 边框：1px纯黑；柔性生长：1；弹性基准：0； /*或高度：0*/ /*如果需要，添加最小高度：0*/ 显示器：flex；背景颜色：黄色；对齐项目：居中； } .col-1， .col-2{ 边框：1px纯绿色； } 上校：对{ 左侧填充：10px； } X 一些内容 XXX 一些较长的内容 aa-ab Amet illo digito facilis blanditiis别名。请解释一下，你是如何看待我们的工作的？Accusantium ipsa iusto velit中的Accusantium？我不知道该怎么做 flex grow的工作方式是：它只在应用flex basis（当auto从宽度或高度获取其值时）后才占用可用空间并将其分配，在当前情况下，由于flex direction:column，它的值为高度。在当前情况下，“弹性基准”是自动的，因为高度也是自动的。如果应用flex basis后没有剩余的可用空间，flex grow将无法工作

演示：

有趣的高度：0确实有效。今天我学到了一个新技巧：谢谢。虽然高度：0确实适用于上述情况，但请记住它会打破垂直居中。很有趣。高度：0确实有效。今天我学到了一个新技巧：谢谢。虽然高度：0确实适用于上述情况，但请记住它将打破垂直居中。谢谢。flex basis:0确实是缺少的一位。谢谢。flex basis:0确实是缺少的位。