代码之家 › 专栏 › 技术社区 › Onyx

父div是flex,子div是带有弹性:1。如何将右栏内容推送到右栏?

flexbox css3 css html

1

Onyx · 技术社区 · 6 年前

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

2 回复 | 直到 6 年前

1

doppler 6 年前

如果要折叠最后一列,可以重置 flex-grow 0 与 last-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>

2

1

Mamadou Aliou Bah 6 年前

.row {
    display: flex;
    justify-content: space-between;
}
.column {
    /* not need flex 1 here*/
}

<div class='row'>
    <div class='column'>
        <p>HELLO</p>
    </div>
    <div class='column'>
        <p>HELLO</p>
    </div>
</div>