ALIGN-自己：<a href="https://jsfiddle.net/0zq5a5xu/1/" rel="noreferrer">JSFiddle</a></p> <p>私は著者のdivが彼の親コンテナの底になりたい：あなたがここに見ることができるようにフレックスエンドは

Question

下

にアイテムを移動しません。 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

ます。また、フレックスエンドを削除する必要が

margin-top: auto; 

を.authorに追加してください。

Answer 2

フレックススタートからフロートしなければならないdivの周りにラッパー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>

この情報がお役に立てば幸いです。