Question

我在获得具有相等列高度的flex布局时遇到了一些困难。我有一个包含一些行（.row-container）的容器（.flex-row）。这些行包含一些不同长度的内容。我希望所有行都有相同的高度。就我的灵感理解而言，我必须在子项（flex: display）中设置父项flex-direction）和.row-container中的flex-grow: 1和.flex-row 。但是，行的高度不同，请参阅此jsfiddle。关于如何使这项工作的任何想法（也许是解释）？

.row-container {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 75%;
  border: 1px solid blue;
}

.flex-row {
  border: 1px solid black;
  flex-grow: 1;
  display: flex;
  background-color: yellow;
  align-items: center;
}

.col-wrapper {}

.col-1,
.col-2 {
  border: 1px solid green;
}

.col-right {
  padding-left: 10px;
}

<div class="some-div">
  <div class="row-container">
    <div class="flex-row">
      <div class="col-wrapper">
        <div class="col-1">X</div>
        <div class="col-2">some content</div>
      </div>
    </div>
    <div class="flex-row">
      <div class="col-wrapper">
        <div class="col-1">XXX</div>
        <div class="col-2">some longer content</div>
      </div>
    </div>
    <div class="flex-row">
      <div class="col-wrapper">
        <div class="col-1">aa ab</div>
        <div class="col-2">Amet illo distinctio facilis blanditiis alias. Explicabo dolores asperiores ducimus aut officiis, vero? Accusantium in accusantium ipsa iusto velit? Quas nesciunt ipsam amet impedit adipisci odio Omnis nemo perspiciatis quibusdam</div>
      </div>
    </div>
  </div>
</div>

（注意：在我的应用程序中，我还在row-container中进行了一些“列弯曲”。除了flex中心之外，这个代码被省略了。）

Answer 1

诀窍是将所有flex项目（.flex-row）设置为具有相同的基线高度，并允许它们相互平等增长。

e.g。

.flex-row {
   flex: 1 0 0;
}

可能更容易理解：

.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
}

但是，如果您的三个弹性行的内容定义高度高于300px - row-container的高度，那么您将面临这样的风险：高度为{1}}，内容可能会溢出100px

Answer 2

flex-grow以这种方式运作：只有在应用flex-basis后auto从width或height获取其值时，它才会占用可用空间并进行分配，在目前的情况下，由于height，它是flex-direction: column。在目前的情况下，flex-basis为auto，因为height为also。如果在应用flex-basis后仍然没有可用空间，则flex-grow将无效。

所以这里有几个选项：设置height: 0或设置flex-basis: 0。此外，您可能需要min-height: 0（因为min-height: auto在某些情况下不允许flex-item占用的内容少于其内容。）

演示：

.row-container {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 75%;
  border: 1px solid blue;
}

.flex-row {
  border: 1px solid black;
  flex-grow: 1;
  flex-basis: 0;
  /* or height: 0; */
  /* if needed add min-height: 0; */
  display: flex;
  background-color: yellow;
  align-items: center;
}

.col-1,
.col-2 {
  border: 1px solid green;
}

.col-right {
  padding-left: 10px;
}

<div class="some-div">
  <div class="row-container">
    <div class="flex-row">
      <div class="col-wrapper">
        <div class="col-1">X</div>
        <div class="col-2">some content</div>
      </div>
    </div>
    <div class="flex-row">
      <div class="col-wrapper">
        <div class="col-1">XXX</div>
        <div class="col-2">some longer content</div>
      </div>
    </div>
    <div class="flex-row">
      <div class="col-wrapper">
        <div class="col-1">aa ab</div>
        <div class="col-2">Amet illo distinctio facilis blanditiis alias. Explicabo dolores asperiores ducimus aut officiis, vero? Accusantium in accusantium ipsa iusto velit? Quas nesciunt ipsam amet impedit adipisci odio Omnis nemo perspiciatis quibusdam</div>
      </div>
    </div>
  </div>
</div>

另外，我建议添加一些overflow值来指定行为，例如： overflow-y: auto，.flex-row。

Answer 3

ivy { url "s3://bucketname" credentials(AwsCredentials) { accessKey "access-key" secretKey "secret-key" } layout("pattern") { artifact "[module].[ext]" } } configuration { myzip } dependencies { myzip '<group>:<artifact>:<version>@zip' } println configurations.myzip.files 像这样的东西？

Answer 4

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

.flex-row {
    height: 0;
}

CSS Flex：如何在弹性行中获得相同的高度

4 个答案: