父div是flex，子div是flex:1的列，如何将右侧列的内容推到列的右侧？
父div是flex，子div是flex:1的列，如何将右侧列的内容推到列的右侧？
提问于 2019-04-16 05:58:55
我正在尝试将第二列中的"HELLO“推到列的右侧，而不改变第一列中"HELLO”的位置。实现这一目标的最简单方法是什么？
.row {
display: flex;
}
.column {
flex: 1;
}
.slideshow-photos {
width: 100%;
height: 100%;
object-fit: cover;
}
.mySlides {
width: 100px;
height: 100px;
}<div class='row'>
<div class='column'>
<p>HELLO</p>
</div>
<div class='column'>
<div class="photos-container">
<div class="mySlides">
<img class='slideshow-photos' src="https://www.animalfriends.co.uk/app/uploads/2014/08/06110347/Kitten-small.jpg">
</div>
</div<
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-16 06:09:46
如果希望折叠最后一列，可以使用last-of-type伪类将flex-grow值重置为0。
.row {
display: flex;
}
.column {
flex: 1;
}
.column:last-of-type {
flex: 0;
}
.slideshow-photos {
width: 100%;
height: 100%;
object-fit: cover;
}
.mySlides {
width: 100px;
height: 100px;
}<div class='row'>
<div class='column'>
<p>HELLO</p>
</div>
<div class='column'>
<div class="photos-container">
<div class="mySlides">
<img class='slideshow-photos' src="https://www.animalfriends.co.uk/app/uploads/2014/08/06110347/Kitten-small.jpg">
</div>
</div<
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55697792
复制相关文章
相似问题
腾讯云开发者
