即使垂直和水平對齊flexbox

基本上我有三個項目與flexboxes排成一行，但它的工作原理與垂直對齊有一個奇怪的問題。截圖： Fiddle Demo即使垂直和水平對齊flexbox

.flex-container { 
 
    display: flex; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    flex-direction: row; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    -webkit-box-align: center; 
 
    align-items: center; 
 
} 
 

 
.points { 
 
    flex: 1; 
 
    vertical-align: top; 
 
} 
 

 
.p1 { 
 
    align-self: flex-start; 
 
} 
 

 
.p2 { 
 
    align-self: center; 
 
} 
 

 
.p3 { 
 
    align-self: flex-end; 
 
}

<div class="textcenter"> 
 
    <h1>Lorem Ipsum</h1> 
 
    <h4>dolor sit amet, consectetur adipiscing</h4> 
 
</div> 
 

 
<div class="flex-container bg"> 
 
    <div class="points p1 textcenter"> 
 
    <h3>Support for most popular<br>languages and frameworks</h3> 
 
    <p></p> 
 
    </div> 
 

 
    <div class="points p2 textcenter"> 
 
    <h3>Open Source</h3> 
 
    </div> 
 

 
    <div class="points p3 textcenter"> 
 
    <h3>Constantly Growing</h3> 
 
    </div> 
 
</div>

由於提前，迭戈

來源

2017-03-05 Diego Eann

我也有你的榜樣，迭戈一個奇怪的問題。無論我嘗試多麼努力，我都無法檢查用於生成該圖像的代碼。請提供[mcve]，以便我可以幫助你。 –

也許你在最後一個flex孩子的元素上有默認的margin/padding？ –

或'top' +'relative'，一個簡單的'
'，一個僞元素，一個'transform'，'line-height'，'align-self'，這個列表繼續。我更喜歡考察猜測。花費更少的時間來回答和修復。 –

Revise Fiddle

.flex-container { 
 
    display: flex; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    flex-direction: row; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    -webkit-box-align: center; 
 
    align-items: center; 
 
    background-color: cadetblue; 
 
} 
 

 
.points { 
 
    flex: 1; 
 
    vertical-align: top; 
 
    text-align: center; 
 
} 
 

 
p1,p2,p3 { 
 
}

<div class="textcenter"> 
 
    <h1>tutorial-db</h1> 
 
    <h4>The Ultimate Coding Recource Database</h4> 
 
</div> 
 

 
<div class="flex-container bg"> 
 
    <div class="points p1 textcenter"> 
 
     <h3>Support for most popular<br>languages and frameworks</h3> 
 
     <p></p> 
 
    </div> 
 

 
    <div class="points p2 textcenter"> 
 
     <h3>Open Source</h3> 
 
    </div> 
 

 
    <div class="points p3 textcenter"> 
 
     <h3>Constantly Growing</h3> 
 
    </div> 
 
</div>

來源

2017-03-06 04:52:22

我希望你不要把這當作批評，但作爲一個建議，如果你想改善答案的質量，你可以在[答案]中找到一些很好的一般建議。對於這一點，尤其是*，「試試這個」*答案的類型通常被認爲是較低的質量（即使解決方案是正確的），因爲它明確表示答案基於猜測/猜測/感覺比實際瞭解問題。此外，您可以嘗試簡要解釋一下原則：爲什麼您認爲特定的解決方案可行？最好的問候， –

謝謝你@AndreiGheorghiu建議。從不重複這個錯誤。 –

即使垂直和水平對齊flexbox

回答

相關問題