CODEWITHSUNDEEP
htmlcssflexbox
Yabusa
Yabusa

Reputation: 579

Creating a responsive flex box with same size images

New to html/CSS, learning flex boxes, I feel I've followed the W3schools website example correctly and I also took some code from here on making it responsive, but I can't get the images to wrap when the viewport is reduced.

Here is my code to start: CSS:

* {font-family: arial, sans-serif; box-sizing: border-box;}

html body {margin: 0;}

.flex-container {
    display: flex;
    margin: 0 .5%;
}

.flex-container > div {
    margin: 1%;
}

.whatwecando {padding-top: 125px;
padding-bottom: 15px;
}

.nav {position:flex; top:0; left:0;
    background-color: black;
    font-size: 20px; 
    float: left; 
    border-radius: 0px;
    border: none;
    width: 100%;
    overflow: hidden;
    margin: 0;
    list-style-type: none;
    padding: 25px;
    display: flex;
    list-style: none;
    flex-direction: row;
    /* vertical alignement */
    align-items: center;
    /* how you want horizontal distribution */
    /* space-evenly | space-around | space-between */
    justify-content: space-evenly;
}

.item {
    color: white;
}

.item:first-child {
    height: 50px;
    line-height: 50px;
}

@media screen and (max-width:500px){
    .column {
        width: 100%;
    }
}

ul {list-style: none}

HTML: 

<div class="flex-container">

<div><img src="Images/Printing/Banner.jpg" style="max-width:100%; height: auto;" width="100%" alt="Banners" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%; height: auto;" width="100%" alt="Posters" /></div>
<div><img src="Images/Printing/Banner.jpg" style="max-width:100%; height: auto;" width="100%" alt="Flock again" /></div>

When I add the flex-wrap: wrap; (which would logically be the solution) in the container class, all the images become lined up vertically, so I had removed it. I'm tryingn to create like a grid of images, am I not understanding flexboxes correctly?

Upvotes: 1

Views: 8386

Answers (1)

Geri Gjata
Geri Gjata

Reputation: 31

Here is a simple and nice guide to flexbox content. I think you got something mixed (classes in css and html).

Here's another thing to try to make images have the same size:

.image-container{
    width:100px;
}
.image-container img {
    width:100%;
    height:100px;
    object-fit:cover;
}

(image height must be fixed for this to work).

Upvotes: 2

Related Questions