Trying to place the images next to each other with the display; flex

Asked

Viewed 52 times

-2

<section class="flex">
    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>

    <div><img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco</div>
</section>

css below:

img{
    max-width: 10%;
    display: block;
}

\*css flexbox*\

.flex{
    display: flex;
    flex-wrap: wrap;
    max-width: 880px
    margin: 0 auto;
}

.flex > div {
    flex: 1 1 200px;
    margin: 10px;

I’m trying to align the images side by side, getting 3 images on top and 3 below as if it were a store page, displaying products

css grid flexbox

2 answers

1

Basically the error was lack of attention when writing the code the comment was not made in the correct way

Wrong *css flexbox*\

Correct /* css flexbox */

And the lack of one ; after the max-width: 880px prevented the next style margin: 0 auto; carry

Adjusting this your code will be almost ready, just need to adjust the calculations your box that is grouping the products have 880px width and each product has margin of 10px as you want 3 products per line and this margin is everywhere, we must subtract 60px from 880px and then split by 3

Thus 880-60=820/3=273px

So instead of flex: 1 1 200px; the correct would be flex: 1 1 273px;

img{ max-width: 10%; display: block; }

/*css flexbox*/

.flex{ display: flex; flex-wrap: wrap; max-width: 880px; margin: 0 auto; }

.flex > div { flex: 1 1 200px; margin: 10px; }

Remembering that it is good practice to "name" your divs through the classes

0

The best way to do this is by separating the images from 3 to 3 within Divs, as shown below:

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

.row1, .row2 {
  display: flex;
  margin: 15px 5px 
}
<section class="flex">
            <div class='row1'>
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
        
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
        
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
            </div>
            <div class='row2'>
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
        
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
        
                <img src="fotocurriculum/moletom.jpg" alt="moletom"> Moletom Branco
            </div>
        </section>

As in the example is just you centralize everything with the justify-content and align-items and set the flex-direction for a column that looks as expected!

Browser other questions tagged css grid flexbox

You are not signed in. Login or sign up in order to post.