Gerade vertikale und horizontale Ausrichtung flexbox

Grundsätzlich habe ich drei Elemente in einer Reihe mit flexboxes ausgerichtet und es funktioniert, aber es gibt ein seltsames Problem mit der vertikalen Ausrichtung. Screenshot: Fiddle DemoGerade vertikale und horizontale Ausrichtung 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>

Vielen Dank im Voraus, Diego

Quelle

2017-03-05 Diego Eann

Ich bin auch ein seltsames Problem mit Ihrem Beispiel Diego hat. Egal, wie sehr ich es versuche, ich kann den Code, mit dem Sie dieses Bild erstellt haben, nicht überprüfen. Bitte stelle eine [mcve] zur Verfügung, damit ich dir helfen kann. –

Vielleicht haben Sie Standardrand/Padding für das Element im letzten Flex-Child? –

Oder 'top' +' relativ', eine einfache '
', ein Pseudoelement, eine' transform', 'line-height',' align-self' und die Liste geht weiter. Ich bevorzuge es, zu raten. Es braucht viel weniger Zeit, um zu antworten und zu beheben. –

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>

Quelle

2017-03-06 04:52:22

Ich hoffe, Sie nehmen dies nicht als Kritik, sondern als einen Vorschlag, wenn Sie jemals daran arbeiten möchten, die Qualität Ihrer Antworten zu verbessern, könnten Sie in [Antwort] einige gute allgemeine Hinweise finden. Gerade bei dieser Art von "Antworten" tendieren sie dazu, im Allgemeinen als minderwertige Qualität zu gelten (auch wenn die Lösung die richtige ist), weil sie klarstellt, dass die Antwort eher auf raten/anfassen/fühlen basiert als das Problem tatsächlich zu verstehen. Außerdem könnten Sie versuchen, das Prinzip kurz zu erklären: Warum denken Sie, dass eine bestimmte Lösung funktionieren würde? Mit freundlichen Grüßen, –

danke @AndreiGheorghiu für vorschlagen. Wiederholen Sie diesen Fehler nie. –

Gerade vertikale und horizontale Ausrichtung flexbox

Antwort

Verwandte Themen