संरेखित आत्म: फ्लेक्स के अंत करने के लिए नीचे

Question

आइटम नहीं चलती आप यहाँ देख सकते हैं: JSFiddle

मैं लेखक div अपने मूल कंटेनर के तल पर होना चाहता हूँ। मैंने align-self: flex-end; के साथ प्रयास किया लेकिन यह काम नहीं कर रहा है। मैं क्या गलत कर रहा हूं?

.flexbox { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100px; 
 
    border: 1px solid #000; 
 
    padding: 10px; 
 
} 
 

 
.item .author { 
 
    width: 100%; 
 
    align-self: flex-end; 
 
    border: 1px solid #000; 
 
}

<div class="flexbox"> 
 

 
    <div class="item"> 
 
    <div class="title"> 
 
     Title 
 
    </div> 
 
    <div class="content"> 
 
     Content 
 
    </div> 
 
    <div class="author"> 
 
     Author 
 
    </div> 
 
    </div> 
 

 
    <div class="item"> 
 
    <div class="title"> 
 
     Title 
 
    </div> 
 
    <div class="content"> 
 
     Content<br>Content 
 
    </div> 
 
    <div class="author"> 
 
     Author 
 
    </div> 
 
    </div> 
 

 
    <div class="item"> 
 
    <div class="title"> 
 
     Title 
 
    </div> 
 
    <div class="content"> 
 
     Content<br>Content<br>Content 
 
    </div> 
 
    <div class="author"> 
 
     Author 
 
    </div> 
 
    </div> 
 

 
</div>

Answer 1

.author को

margin-top: auto; 

तुम भी फ्लेक्स अंत हटाने की जरूरत को जोड़ने का प्रयास करें।

Answer 2

आप divs के चारों ओर एक रैपर div बना सकते हैं जिसे फ्लेक्स स्टार्ट से फ़्लोट करना पड़ता है। और रैपर के बाहर लेखक और .itemjustify-content: space-between; को दें।

https://jsfiddle.net/0zq5a5xu/2/

.flexbox { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    width: 100px; 
 
    border: 1px solid #000; 
 
    padding: 10px; 
 
} 
 

 
.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.author { 
 
    width: 100%; 
 
    border: 1px solid #000; 
 
}

<div class="flexbox"> 
 

 
    <div class="item"> 
 
    <div class="wrapper"> 
 
     <div class="title"> 
 
     Title 
 
     </div> 
 
     <div class="content"> 
 
     Content 
 
     </div> 
 
    </div> 
 

 
    <div class="author"> 
 
     Author 
 
    </div> 
 
    </div> 
 

 
    <div class="item"> 
 
    <div class="wrapper"> 
 
     <div class="title"> 
 
     Title 
 
     </div> 
 
     <div class="content"> 
 
     Content<br>Content 
 
     </div> 
 
    </div> 
 
    <div class="author"> 
 
     Author 
 
    </div> 
 
    </div> 
 

 
    <div class="item"> 
 
    <div class="wrapper"> 
 
     <div class="title"> 
 
     Title 
 
     </div> 
 
     <div class="content"> 
 
     Content<br>Content<br>Content 
 
     </div> 
 
    </div> 
 
    <div class="author"> 
 
     Author 
 
    </div> 
 
    </div> 
 

 

 
</div>

आशा इस मदद करता है।