Question

如果我有一个用flex-flow: column样式设置的flexbox，并且该容器有五个高度可变的子项div，是否可以使所有子项的高度与最高子项的高度相同？< / p>

我并不一定要用它们填充容器（即让它们填充任何多余的空间），只是高度都相同。

在下面的代码段中，五个子div的内容都不同，这导致它们的高度不同；是否可以使全部五个都与内容最多的最高div一样高？

html {
    font-family: Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
}

body {
  background: #333;
  color: #333;
}

.container {
  background: firebrick;
  display: flex;
  flex-flow: column;
  height: 50rem;
  margin: 0 auto;
  padding: 1rem;
  width: 30rem;
}

.panel {
  background: white;
  padding: 1rem;
}

.panel:nth-child(even) {
  background: lightgrey;
}

<div class="container">
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
  <div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="panel">this is a test</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>

Answer 1

简单的回答是“否”。 Flexbox根据容器的大小而不是特定同级的大小在弹性项目之间分配空间。您需要使用脚本。

Answer 2

如果您不介意它们拉伸到适合容器的高度，则可以将子级flex-basis设置为20％：

html {
    font-family: Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
}

body {
  background: #333;
  color: #333;
}

.container {
  background: firebrick;
  display: flex;
  flex-flow: column;
  height: 50rem;
  margin: 0 auto;
  padding: 1rem;
  width: 30rem;
}

.panel {
  background: white;
  padding: 1rem;
  flex-basis: 20%;
}

.panel:nth-child(even) {
  background: lightgrey;
}

<div class="container">
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
  <div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="panel">this is a test</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>

Answer 3

您可以使用flex-basis来做到这一点，必须要知道有多少个孩子。您也可以使用flex-grow，但这只会分配可用的额外空间，因此最高的元素仍将比较短的元素高：

html {
    font-family: Arial, sans-serif;
}

*,
*:before,
*:after {
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 0;
}

body {
  background: #333;
  color: #333;
}

.container {
  background: firebrick;
  display: flex;
  flex-flow: column;
  height: 50rem;
  margin: 0 auto;
  padding: 1rem;
  width: 30rem;
}

.panel {
  background: white;
  padding: 1rem;
flex-basis: 20%;
}

.panel:nth-child(even) {
  background: lightgrey;
}

<div class="container">
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam pariatur commodi ipsum ex quam eius voluptatibus fugit vero, consectetur explicabo cum magni fugiat natus.</div>
  <div class="panel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
  <div class="panel">this is a test</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, commodi a!</div>
  <div class="panel">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Saepe, nihil pariatur enim, porro temporibus harum, quo omnis beatae eaque soluta totam ipsa?</div>
</div>

是否可以使“ flex-flow：column” flexbox的所有子级与最高的子级具有相同的高度？

3 个答案: