CODEWITHSUNDEEP
htmlcssflexbox
Onyx
Onyx

Reputation: 5772

Parent div is flex, children divs are columns with flex:1. How to push the content of the right column to the right side of the column?

I'm trying to push the "HELLO" in the second column to the right side of the column without changing the position of the "HELLO" in the first column. What is the easiest way of accomplishing this?

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

Upvotes: 1

Views: 292

Answers (2)

Mamadou Aliou Bah
Mamadou Aliou Bah

Reputation: 44

try this code it should work

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

Upvotes: 1

doppler
doppler

Reputation: 883

If you want your last column to collapse, you can reset the flex-grow value to 0 with the last-of-type pseudo-class.

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

Upvotes: 1

Related Questions