फ्लेक्सबॉक्स: नीचे और केंद्र के बीच संरेखित करें?

Question

क्या कोई जानता है कि फ्लेक्सबॉक्स का उपयोग करके इस लेआउट को कैसे बनाया जाए?

पाठ केंद्र में रखा जा रहा है, और बटन पाठ और नीचे के बीच में रखा जा रहा है।

मैं अब इस राशि:

.aligner { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100%; 
 
}

<div class="aligner"> 
 
    <h3>SUPERMAN</h3> 
 
    <p>FTW</p> 
 
    <button>BUTTON</button> 
 
</div>

इस केंद्र में सब कुछ संरेखित करता है, लेकिन मैं केवल पाठ केंद्र में रहना चाहता हूँ, और केंद्र और नीचे के बीच बटन।

Answer 1

आप इस लेआउट की कोशिश कर सकते हैं: flex: 1

शीर्षक और उपशीर्षक (शीर्षक) के साथ

• बेनामी तत्व flex: 1 और display: flex साथ
• तत्व।

शीर्षक के ऊपर और नीचे के तत्व बराबर मात्रा में शीर्षक से छोड़े गए स्थान ले लेंगे। तो खिताब केंद्रित हो जाएगा।

वे तत्व फ्लेक्स कंटेनर भी हो सकते हैं, और आप उनकी सामग्री को वांछित के रूप में संरेखित कर सकते हैं।

html, body {height: 100% } * { margin: 0; } 
 
.aligner, .below { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.aligner { 
 
    height: 100%; 
 
} 
 
.aligner::before { content: ''; } 
 
.aligner::before, .below { 
 
    flex: 1; 
 
}

<div class="aligner"> 
 
    <h3>SUPERMAN</h3> 
 
    <p>FTW</p> 
 
    <div class="below"> 
 
    <button>BUTTON</button> 
 
    </div> 
 
</div>

Answer 2

टेक्स्ट को केंद्र में रखा जा रहा है, और बटन पर जा रहा है ताकि टेक्स्ट और नीचे के बीच रखा जा सके।

आप एक अदृश्य फ्लेक्स आइटम के साथ auto margins के संयोजन का उपयोग कर सकते हैं लेआउट प्राप्त करने के लिए:

(संपादित करें:। मैंने पहले प्रश्न नमूना कोड के साथ अद्यतन किया गया था इस जवाब लिखा तो मेरी कोड में से अलग है प्रश्न। लेकिन पद्धति अभी भी लागू होता है।)

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
} 
 

 
.container > div:nth-child(1) { margin-top: auto; visibility: hidden; } 
 
.container > div:nth-child(2) { margin-top: auto; } 
 
.container > div:nth-child(3) { margin-top: auto; margin-bottom: auto; } 
 

 
/* non-essential decorative styles */ 
 
.container { 
 
    background-color: yellow; 
 
} 
 
.box { 
 
    height: 50px; 
 
    width: 150px; 
 
    background-color: lightgreen; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    font-size: 1.2em; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="box">BUTTON</div><!-- invisible flex item --> 
 
    <div class="box">SUPERMAN</div> 
 
    <div class="box">BUTTON</div> 
 
</div>

jsFiddle

---

इसके अलावा, दो मामूली समायोजन, साथ नीचे आइटम बढ़त से भरा हो सकता है।

.container > div:nth-child(1) { /* margin-top: auto; */ visibility: hidden; } 
.container > div:nth-child(2) { margin-top: auto; } 
.container > div:nth-child(3) { margin-top: auto; /* margin-bottom: auto; */ } 

jsFiddle

या, बस का उपयोग justify-content: space-between:

.container > div:nth-child(1) { visibility: hidden; } 
/* .container > div:nth-child(2) { margin-top: auto; } */ 
/* .container > div:nth-child(3) { margin-top: auto; } */ 

.container { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    background-color: yellow; 
    height: 100%; 
    box-sizing: border-box; 
    justify-content: space-between; /* NEW */ 
} 

jsFiddle

---

अधिक संरेखण विकल्पों के लिए देखें: Methods for Aligning Flex Items