Create An Image Gallery Using Flexbox
Tags: css, codenewbie, webdev
Published: 2021-04-20 17:59:39

Creating a simple image gallery could be a little hard.
But thanks to flexbox for making it very simple and save us the headaches ! phew! <br>

We're going to create something like this :

{% codepen https://codepen.io/nazaneyn/pen/mdRKgpg %}



<br>
<i> P.S. I originally used different pics for this article which I got them from <b><a href="https://twitter.com/ttguweiz">GUWEIZ's twitter</a> </b> </i>
<hr>
<br>

##### Okay lets get started <br>

### Setting up HTML

Create an <code>ul</code> element and add your image

```html
<ul>
        <li><img src="/img/new/Es568VFXYAARANj.jpeg" alt=""></li>
        <li><img src="/img/new/Es56_FqXMAUB_O4.jpeg" alt=""></li>
        <li><img src="/img/new/EvexIKIUYAAHw-L.jpeg" alt=""></li>
        <li><img src="/img/new/EvFHhxNXYAg59-F.jpeg" alt=""></li>
</ul>
```

<hr>

### Setting up CSS

First thing first: <br>
Set the <code>ul</code> element's display to <code>display: flex;</code>.

```css

  ul {
      width: 100%;
      display: flex;
  }
```

It will line up all the image in one line and no matter how many images you add, they will all end up being in that line


![Screenshot from 2021-04-16 16-51-49 (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618575891737/jzfgT1POj.png)


This is where <code>flex-wrap: wrap;</code> comes in to warp the images.

```css
 ul {
      width: 100%;
      display: flex;
      /* as the name shows, it will wrap your images */
      flex-wrap: wrap;
  }
```

![Screenshot from 2021-04-16 16-56-34 (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618576273349/h4Ab55ttc.png)

<br>

This is the final code snippet :

```css

  ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
  }
  
  li {
      width: 25%;
      /* gets rid of the bullets */
      list-style: none;
  }
  
  img {
      width: 100%;
  }
```


We just created a image galley.<br>

<i>But there's a little problem. </i><br>
As you can see I sorted my images (vertically/horizontally).<br>
What if my images are like this : <br>


![Screenshot from 2021-04-20 19-54-51 (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1618932491791/g_fSFd6qG.png)


What if you don't want to sort your images? or you have lot of images and don't have time to sort them! What should you do then?<br>

In the first method I sorted the images and set <code>width</code> for  <code>li</code> element, but this won't work for unsorted images and will completely ruin everything ( like I showed you in the pic above).<br>

From what I've learned from  [css tricks](https://css-tricks.com/adaptive-photo-layout-with-flexbox/) 
, in a situation like this when you have unsorted images you need to set <code>height</code>  for <code>li</code> element instead of <code>width</code> 
and for <code>img</code> element you need to set <code> max-height , min-width</code> 

```css
ul {
  display: flex;
  flex-wrap: wrap;
}

li {
  height: 40vh;
  flex-grow: 1;
}

img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
```

{% codepen https://codepen.io/nazaneyn/pen/BapqJqM %}


<hr>

<h4> Here's a small galley project I did back then.<br>
You can check it out <a href="https://github.com/NazaNEYn/I_Care_A_Lot_gallery">here</a> </h4>