相同高度的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物品

回答

相關問題