Question

我的问题：我有3个带有Flex框的容器，但是如果在其中一个中添加一些文本，我就不会，它的高度更高，而其他容器的高度更高。我的代码：

.teaminfo {
  display: flex;
  justify-content: space-around;
  padding-top: 1em;
  height: 400px;
}

.teaminfo-div {
  display: table-cell;
  border: 2px black solid;
  border-radius: 1em;
  text-align: center;
  align-self: flex-end;
  width: 25%;
  overflow: hidden;
}

.teaminfo-div:nth-child(2) {
  align-self: baseline;
}

<div class="teaminfo">
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p>Your contribution what you do lol</p>
  </div>
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p>Your contribution what you do lol</p>
  </div>
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p style="font-size: 1.5em; padding: 0 1em 0 1em;">Your contribution what you do lol</p>
  </div>
</div>

结果：

Screen

Answer 1

要从flex伪造您的布局，您需要定位或变换并且不对齐flex属性。

可能的妥协。

.teaminfo {
  display: flex;
  justify-content: space-around;
  min-height: 300px;/* maybe wiserr than just height */
  padding-top:120px;/* whatever, depends on how much difference you want*/
}

.teaminfo-div {
  /*display: table-cell; really needed ? */
  border: 2px black solid;
  border-radius: 1em;
  text-align: center;
  width: 25%;
  /*overflow: hidden; really needed ? */
}

.teaminfo-div:nth-child(2) {
  position:relative;/* or use transform */
  top:-100px;
}

<div class="teaminfo">
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p>Your contribution what you do lol</p>
  </div>
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p>Your contribution what you do lol</p>
  </div>
  <div class="teaminfo-div">
    <h2>Baguette</h2>
    <img src="image/logo.png" width="100px" height="100px">
    <p style="font-size: 1.5em; padding: 0 1em 0 1em;">Your contribution what you do lol</p>
  </div>
</div>

Answer 2

应用此CSS并始终编写较少的代码以获得更好的性能

.teaminfo
{
    display: flex;
    justify-content: space-around;
    padding-top: 1em;
}

.teaminfo-div
{   display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px black solid;
    border-radius: 1em;
    width: 25%;
}

.teaminfo-div:nth-child(2) {
    transform: translate(0%, -100%);
}

Answer 3

正确使用flexbox：基本上，对于等高的flex-children都必须设置为display：flex在父级上。您在子代上设置了一堆align-self，并且为父代设置了固定高度。全部删除。

.teaminfo
{
    display: flex;
    justify-content: space-between;
    padding-top: 1em;
}

.teaminfo-div
{
    height: auto;
    border: 2px black solid;
    border-radius: 1em;
    text-align: center;
    width: 25%;
    overflow: hidden;
}

<div class="teaminfo">
            <div class="teaminfo-div">
                <h2>Baguette</h2>
                <img src="image/logo.png" width="100px" height="100px">
                <p>Your contribution what you do lol</p>
            </div>
            <div class="teaminfo-div">
                <h2>Baguette</h2>
                <img src="image/logo.png" width="100px" height="100px">
                <p>Your contribution what you do lol</p>
            </div>
            <div class="teaminfo-div">
                <h2>Baguette</h2>
                <img src="image/logo.png" width="100px" height="100px">
                <p style="font-size: 1.5em; padding: 0 1em 0 1em;">Your contribution what you do lol</p>
            </div>
        </div>
My CSS:

容器上的高度相等，但具有Display Flex

3 个答案: