How can I use flexbox to images to make elements appear side by side, vertically and horizontally?

Nana Kwame Dickson 0
Viewed 23

I am trying to get the images on my webpage to display side by side. There are four images, and I want them to be displayed two up, and two down. However, I am unable to get that to happen. I am using flexbox. I have used the flex directions, but it would not work.

section {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: space-between;
}

article {
  flex: 200;
}

.upgrades {
  flex: 100;
}

.reviews {
  align-self: flex-end;
}

figure {
  background-color: #3482D5;
  height: 80px;
  display: flex;
  flex: 1 auto;
  margin: 5px;
  line-height: 1.5;
}
<article class="upgrades">
  <h3>Delorean Upgrades</h3><br>
  <br>
  <figure>
    <img src="https://placekitten.com/200/300" alt="bumper_sticker">
    <figcaption>Flux Capacitor</figcaption>
  </figure>
  <figure>
    <img src="https://placekitten.com/201/301" alt="flame">
    <figcaption>Flame Decals</figcaption>
  </figure>
  <figure>
    <img src="https://placekitten.com/202/302" alt="flux cap">
    <figcaption>Bumper Stickers</figcaption>
  </figure>
  <figure>
    <img src="https://placekitten.com/203/303" alt="hub cap">
    <figcaption>Hub Caps</figcaption>
  </figure>
</article>

media-queries flexbox css html
1 Answers

Adjust the figure flex-basis property:

    section {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    article {
        flex: 200;
    }

    .upgrades{
        flex: 100;
    }

    .reviews {
        align-self: flex-end;
    }

    figure {
        background-color: #3482D5;
        height: 80px;
        display: flex;
        flex: 1 0 40%; /* <- change here */
        margin: 5px;
        line-height: 1.5;
    }

This will change the size of the item. You can check the documentation here.

denies0
Related