Flexbox के साथ नीचे करने के लिए एक तत्व संरेखित करें

Question

मेरे divकुछ बच्चों के साथ है:

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some more or less text</p>
  <a href="/" class="button">Click me</a>
</div>

और मुझे निम्नलिखित लेआउट चाहिए:

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|can have many      |
|rows               |
|                   |
|                   |
|                   | 
|link-button        |
 -------------------

भले ही pमैं कितना भी पाठ क्यों न हो , .buttonहमेशा प्रवाह से बाहर निकाले बिना हमेशा सबसे नीचे रहना चाहता हूं । मैंने सुना है यह Flexbox के साथ प्राप्त किया जा सकता है, लेकिन मैं इसे काम करने के लिए नहीं मिल सकता।

Comments

बस दे दो postition: absolute; bottom 0;?

— जोनाथन

@ जोनाथन के रैपर की निश्चित ऊंचाई नहीं होती है। अगर मैं इसे बाहर ले प्रवाह यह पाठ ओवरलैप होगा

— supersize

@supersize पुराना क्यू लेकिन आप रैपर दे सकते थे position:relative- यह नासमझ है क्योंकि मुझे लगता है कि यह डिफ़ॉल्ट रूप से सापेक्ष है, लेकिन आपके पास बच्चे के निरपेक्ष स्थिति को समाहित करने के लिए सेट है। फिर bottom:0फ्लश फिट होगा।

— जैक्सनक्रा

जैक्सनक्रे सही है, यह सबसे अच्छा समाधान है, अन्य बहुत लंबे हैं, बहुत जटिल हैं या सही तरीके से काम नहीं कर रहे हैं

— बारबज_वाईएचओएल

@Jacksonkr डिव की डिफ़ॉल्ट स्थिति staticनहीं है relative।

— supersize

Answer 1

आप ऑटो मार्जिन का उपयोग कर सकते हैं

के माध्यम से संरेखण से पहले justify-contentऔर align-self, किसी भी सकारात्मक मुक्त स्थान को उस आयाम में ऑटो मार्जिन के लिए वितरित किया जाता है।

तो आप इनमें से किसी एक (या दोनों) का उपयोग कर सकते हैं:

p { margin-bottom: auto; } /* Push following elements to the bottom */
a { margin-top: auto; } /* Push it and following elements to the bottom */

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
a {
  margin-top: auto;
}

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

वैकल्पिक रूप से, आप aउपलब्ध स्थान को भरने के लिए बढ़ने से पहले तत्व बना सकते हैं :

p { flex-grow: 1; } /* Grow to fill available space */

.content {
  height: 200px;
  border: 1px solid;
  display: flex;
  flex-direction: column;
}
h1, h2 {
  margin: 0;
}
p {
  flex-grow: 1;
}

<div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some text more or less</p>
  <a href="/" class="button">Click me</a>
</div>

Comments

मेरे लिए, यह क्रोम में काम करता है, लेकिन आईओएस 10.2 पर सफारी में नहीं। क्या कोई पुष्टि कर सकता है?

— मैथ्यू

@ ओरिओल मुझे यह तरीका पसंद है, लेकिन हाशिये पर पड़ने का दुष्प्रभाव नहीं, तो आप इस बारे में क्या करेंगे?

— नील

फ्लेक्स-ग्रो ने मेरे लिए काम किया। यहाँ मैंने यह कैसे कियाhtml { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } #site-content { flex: 1; }

— प्रोटॉएन्जेलियन

एक साइड नोट भी, height: 100%उस मूल तत्व को याद करें, जिसके साथ आप किसी चीज़ को नीचे से ऊपर की ओर धकेलने की कोशिश कर रहे हैंmargin-top: auto;

— skolind

"किसी भी सकारात्मक मुक्त स्थान को उस आयाम में ऑटो मार्जिन के लिए वितरित किया जाता है।" यह इस तरह की छोटी चीजें हैं जो बहुत ही सुंदर हैं, मेरे लिए यह समाधान आपके उत्तर के आधार पर कोड की 2 पंक्तियां थीं। धन्यवाद :)

— danjah

Answer 2

आप प्रदर्शन का उपयोग कर सकते हैं: किसी तत्व को नीचे की ओर रखने के लिए फ्लेक्स, लेकिन मुझे नहीं लगता कि आप इस मामले में फ्लेक्स का उपयोग करना चाहते हैं, क्योंकि यह आपके सभी तत्वों को प्रभावित करेगा।

फ्लेक्स का उपयोग करके एक तत्व को नीचे की ओर रखने की कोशिश करें:

.container {
  display: flex;
}

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

आपकी सबसे अच्छी शर्त स्थिति सेट करना है: बटन को निरपेक्ष करना और इसे सेट करना bottom: 0, या आप कंटेनर के बाहर बटन रख सकते हैं और transform: translateY(-100%)इसे इस तरह से कंटेनर में लाने के लिए नकारात्मक का उपयोग कर सकते हैं :

.content {
    height: 400px;
    background: #000;
    color: #fff;
}
.button {
    transform: translateY(-100%);
    display: inline-block;
}

इस JSFiddle की जाँच करें

Comments

यदि आप इसे सबसे नीचे चाहते हैं, तो फ्लेक्स-दिशा को कॉलम पर सेट करना सुनिश्चित करें।

— वीलामी

अगर मैं ऊंचाई प्रदान नहीं कर सकता तो क्या होगा?

— मार्क

मेरे लिए क्या काम था: `` `। सामग्री {प्रदर्शन: फ्लेक्स; फ्लेक्स-दिशा: कॉलम; औचित्य-सामग्री: फ्लेक्स-एंड; } <div class = "content"> <a class="bottom"> कुछ </a> </ div> `` `

— gsalgadotoledo

Answer 3

समाधान मेरे साथ align-self: flex-end;काम नहीं किया, लेकिन इस मामले में आप फ्लेक्स का उपयोग करना चाहते हैं:

परिणाम

 -------------------
|heading 1          |
|heading 2          | 
|paragraph text     |
|                   |
|                   |
|                   | 
|link button        |
 -------------------

कोड

नोट: जब "कोड स्निपेट चल रहा है" तो आपको नीचे दिए गए लिंक को देखने के लिए नीचे स्क्रॉल करना होगा।

.content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  height: 300px;
}

.content .upper {
  justify-content: normal;
}

/* Just to show container boundaries */
.content .upper, .content .bottom, .content .upper > * {
  border: 1px solid #ccc;
}

<div class="content">
  <div class="upper">
	  <h1>heading 1</h1>
	  <h2>heading 2</h2>
	  <p>paragraph text</p>
  </div>

  <div class="bottom">
	  <a href="/" class="button">link button</a>
  </div>
</div>

Comments

सामग्री कॉलम कंटेनर है जिसमें यह 2 अन्य कंटेनर रखता है, औचित्य-सामग्री के साथ: अंतरिक्ष-बीच; आप कन्टेनबॉक्स को कंटेनर को एक दूसरे से दूर धकेलने के लिए कहेंगे कि कितना संभव है (इस मामले में सामग्री कंटेनर की ऊंचाई तक सीमित है)

— ConquerorsHaki

यह वास्तविक परिणाम नहीं है, इसमें प्रत्येक आइटम के बीच स्थान होगा (इसलिए नाम)

— बारब__होल्स

@Barbz_YHOOL नहीं, अगर आप कंटेनर की ऊँचाई बढ़ाते हैं तो यह काम करता है (अद्यतन उदाहरण देखें)

— तिमो

बहुत खोजने के बाद, यह एकदम सही है! धन्यवाद।

— रूडी

थोड़ा संशोधन के साथ, इस जवाब ने मेरे लिए पूरी तरह से काम किया, धन्यवाद

— RealMJDev

Answer 4

Flexbox के बारे में निश्चित नहीं है, लेकिन आप स्थिति संपत्ति का उपयोग कर सकते हैं।

माता div position: relative - पिता और बाल तत्व सेट करें जो एक <p>या <h1>आदि हो सकता है .. सेट position: absoluteऔर bottom: 0।

उदाहरण:

index.html

<div class="parent">
  <p>Child</p>
</div>

style.css

.parent {
  background: gray;
  width: 10%;
  height: 100px;    
  position: relative;
}
p {
  position: absolute;
  bottom: 0;
}

यहां कोड पेन।

Comments

position:fixedकाम नहीं करेगा क्योंकि तब यह उस कंटेनर के सापेक्ष नहीं होगा जो इसमें है। शायद आपका मतलब है position:absolute?

— सेंसोराय

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, क्यों और / या इस कोड के उत्तर के बारे में अतिरिक्त संदर्भ प्रदान करने से प्रश्न इसके दीर्घकालिक मूल्य में सुधार करता है।

— रोलस्टुफ़्लोरहेयर

अद्यतन उत्तर।

— संजय श्री

Answer 5

<section style="display:flex; flex-wrap:wrap;">
    <div style="display:flex; flex-direction:column; flex:1;">
        <button style="margin-top: auto;"/>
    </div>
    <div style="display:flex; flex-direction:column; flex:1;">
        <button style="margin-top: auto;"/>
    </div>
</section>

डेमो: https://codepen.io/ferittuncer/pen/YzygpWX

Answer 6

अपने प्रदर्शन को फ्लेक्स पर सेट करते समय , आप बस flexसंपत्ति का उपयोग यह चिह्नित करने के लिए कर सकते हैं कि कौन सी सामग्री बढ़ सकती है और कौन सी सामग्री नहीं।

लचीली संपत्ति

div.content {
 height: 300px;
 display: flex;
 flex-direction: column;
}

div.up {
  flex: 1;
}

div.down {
  flex: none;
}

<div class="content">
  <div class="up">
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <p>Some more or less text</p>
  </div>

  <div class="down">
    <a href="/" class="button">Click me</a>
  </div>
</div>

Answer 7

इसे इस्तेमाल करे

.content {
      display: flex;
      flex-direction: column;
      height: 250px;
      width: 200px;
      border: solid;
      word-wrap: break-word;
    }

   .content h1 , .content h2 {
     margin-bottom: 0px;
    }

   .content p {
     flex: 1;
    }

   <div class="content">
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <p>Some more or less text</p>
  <a href="/" class="button">Click me</a>
</div>

Answer 8

मुझे बस इसके लिए एक समाधान मिला।

उन लोगों के लिए जो दिए गए उत्तरों से संतुष्ट नहीं हैं, फ्लेक्सबॉक्स के साथ इस दृष्टिकोण की कोशिश कर सकते हैं

सीएसएस

    .myFlexContainer {
        display: flex;
        width: 100%;
    }

    .myFlexChild {
        width: 100%;
        display: flex;

        /* 
         * set this property if this is set to column by other css class 
         *  that is used by your target element 
         */
        flex-direction: row;

        /* 
         * necessary for our goal 
         */
        flex-wrap: wrap;
        height: 500px;
    }

    /* the element you want to put at the bottom */
    .myTargetElement {
        /*
         * will not work unless flex-wrap is set to wrap and 
         * flex-direction is set to row
         */
        align-self: flex-end;
    }

एचटीएमएल

    <div class="myFlexContainer">
        <div class="myFlexChild">
            <p>this is just sample</p>
            <a class="myTargetElement" href="#">set this to bottom</a>
        </div>
    </div>