CODEWITHSUNDEEP
cssflexbox
Andre
Andre

Reputation: 59

What am i doing wrong with flexbox trying to align these images?

So I am trying to align images one next to another with display flex but they're not working, tried a lot of things but none of them helped 

.container {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}

.image {
  width: 100%;
  margin-right: 10px;
}
<div class="container">
  <div class="image">
    <img src="photo.jpg">
  </div>

  <div class="image">
    <img src="photo.jpg">
  </div>

  <div class="image">
    <img src="photo.jpg">
  </div>

  <div class="image">
    <img src="photo.jpg">
  </div>
</div>

Upvotes: 1

Views: 74

Answers (1)

Rounin
Rounin

Reputation: 29453

You need to remove

width: 100%;

from your .image styles.

Working Example:

.container {
display: flex;
width: 100%;
flex-wrap: wrap;
}

.image {
margin-right: 10px;
}
<div class="container">

<div class="image">        
<img src="photo.jpg">
</div>

<div class="image">        
<img src="photo.jpg">
</div>

<div class="image">        
<img src="photo.jpg">
</div>

<div class="image">        
<img src="photo.jpg">
</div>

</div>

Update:

Do you want a single row of 4 images? If so, you'll need to give each image a width or a flex-basis of equal to or less than 25% of the .container.

Otherwise an image will be assumed to have a width corresponding to its original size.

You can achieve this by inserting .image {flex: 0 1 25%;} into your CSS:

.container {
display: flex;
width: 100%;
flex-wrap: wrap;
}

.image {
flex: 0 1 25%;
margin-right: 10px;
}

Upvotes: 1

Related Questions