相同高度的Flexbox centeres物品

我放置了flexbox网格，并试图让每个物品都处于相同高度，这不起作用。基本上所有这些蓝色容器应具有相同的高度。相同高度的Flexbox centeres物品

HTML：

<div class="outer"> 

    <div class="item"> 
     <h1>Contact</h1> 
    </div> 

    <div class="item"> 
     <h3>Mail:</h3> 
     <a>[email protected]</a> 
     <br> 
     <a>PGP</a> 
    </div> 

    <div class="item"> 
     <h3>Telegram:</h3> 
     <a>www.t.me/doe</a> 
    </div> 

</div>

CSS：

.outer { 
display: flex; 
justify-content: space-around; 
align-items: center; 
flex-wrap: wrap; 
height: 100vh; 
width: 100vw; 
} 
.item { 
background-color: aqua; 
flex: 1; 
}

照片：

来源

2017-05-29 AndiLeni

这里是你做什么，创建第二个'outer'柔性容器（即您的项目外），这个时候，千万不要把'对齐项：在那里stretch'。 – Adam

我想补充的另一个元素是.outer唯一柔性孩子，垂直居中，与背景应用于它，然后使该元素为包含您的3个部分并将它们对齐的弹性父项。

.outer, .inner { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.outer { 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 
.inner { 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    flex-wrap: wrap; 
 
    flex: 1 0 0; 
 
    background-color: aqua; 
 
} 
 

 
.item { 
 
    flex: 1; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="item"> 
 
     <h1>Contact</h1> 
 
    </div> 
 
    <div class="item"> 
 
     <h3>Mail:</h3> 
 
     <a>[email protected]</a> 
 
     <br> 
 
     <a>PGP</a> 
 
    </div> 
 
    <div class="item"> 
 
     <h3>Telegram:</h3> 
 
     <a>www.t.me/doe</a> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-05-29 21:47:41

相同高度的Flexbox centeres物品

回答

相关问题