Html align-self: flex-end 不将项目移动到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43974824/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
align-self: flex-end not moving item to bottom
提问by user2490424
As you can see here: JSFiddle
正如你在这里看到的：JSFiddle
I want author div to be at the bottom of his parent container. I tried with align-self: flex-end;but it's not working. What am I doing wrong?
我希望作者 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>回答by Alex
Try add to .author
尝试添加到 .author
margin-top: auto;
You also need to remove flex-end.
您还需要删除 flex-end。
回答by webta.st.ic
You can make a wrapper div around the divs which have to float from flex start. And the author outside the wrapper and give to .itemjustify-content: space-between;.
您可以在必须从 flex 开始浮动的 div 周围制作一个包装 div。和作者在包装外并给.itemjustify-content: space-between;.
https://jsfiddle.net/0zq5a5xu/2/
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>Hope this helps.
希望这可以帮助。
