CODEWITHSUNDEEP
cssflexbox
n1234
n1234

Reputation: 175

Flexbox - image on the right side

I have an image on the right side item of a flex container. As you can see in the codepen, there is a gap when expanding the screen (caused by the max-width on the image, which is unavoidable).

However I'm just wanting to move that image to the extreme right-side, so the gap isn't as noticeable.

This needs to be friendly with IE11, and the image needs to be responsive. I would like to avoid using a float on the image if possible (would've thought there is a cleaner way of achieving this using flexbox)?

HTML:

<div class="container">
  <div class="image">
    <img src="http://www.stevensegallery.com/1000/1400">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
  </div>
</div>

CSS:

.container {
  background-color: red;
  display: flex;
  flex-direction: row-reverse;
}
.container > .image {
  flex: 1 0 0%;
}
.image > img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}
.container > .text {
  flex: 2 0 0%;
}

Codepen: https://codepen.io/neilem/pen/zjpXKZ

Upvotes: 5

Views: 27849

Answers (2)

dup.titung
dup.titung

Reputation: 450

Use justify-content property on container and remove flex properties form the flex-child. Your code will look like this. Hope the result is what you desired.

.container {
  background-color: red;
  display: flex;
  flex-direction: row-reverse;

  justify-content: space-between;
}

.image > img {
  display: block;
  max-width: 100%;
  max-height: 300px;
}

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105903

You could use vertical-align instead display, then text-align:

.container {
  background-color: red;
  display: flex;
  flex-direction: row-reverse;
}
.container > .image {
  flex: 1 0 0%;
  text-align:right;/* and here*/
}
.image > img {
  vertical-align:top;/* here */
  max-width: 100%;
  max-height: 300px;
}
.container > .text {
  flex: 2 0 0%;
  /* and eventually */
  
  margin:auto 0;
}
<div class="container">
  <div class="image">
    <img src="http://www.stevensegallery.com/1000/1400">
  </div>
  <div class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus aliquid eius quia expedita illo sequi optio labore assumenda.
  </div>
</div>

Upvotes: 5

Related Questions