时间戳

首页 > 解决方案 > 父 div 是 flex，子 div 是具有 flex:1 的列。如何将右侧栏的内容推送到栏的右侧？

html - 父 div 是 flex，子 div 是具有 flex:1 的列。如何将右侧栏的内容推送到栏的右侧？

问题描述

我试图将第二列中的“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>

标签： htmlcssflexbox

解决方案

如果您希望最后一列折叠，您可以使用伪类将flex-grow值重置为。0last-of-type

.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>

推荐阅读