Titles together with image using flexbox

Question

I’m creating a post area on my site (Html5 and css3), to make the layout of it I used flexbox, I was able to put the images all right, but I’m having problems to put the title of the posts below these images, because they break the layout, makes a huge mess.

How are you getting:

How I wish you to stay:

HTML5:

     <main>
        <h3 class="postagens">Postagens</h3>
        <div id="postagens">
            <div class="post1">
                <img src="../image/postagem.jpg">
                <h3>Titulo da primeira imagem</h3>
            </div>

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

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

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

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

            <div class="post6">
                <img src="../image/postagem.jpg">
            </div>
        </div>
    </main>

CSS3:

.postagens {
    text-transform: uppercase;
    font-size:26px;
    margin-top:100px;
    text-align: center;
}

#postagens {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#postagens img {
    border:1px solid red;
    width:360px;
    height:250px;
    margin-left:30px;
    margin-right:30px;
    margin-bottom:100px;
}

Answer 1

Your code is very inconsistent, especially CSS. I don’t understand the use of several classes with names in sequence: post1, post2, post3 etc., when, in my view, I should use a single class for all, such as post, for example.

You could do it the way below by fixing the CSS and eliminating several unnecessary properties:

.postagens {
    text-transform: uppercase;
    font-size:26px;
    text-align: center;
}

#postagens {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
#postagens img {
    border:1px solid red;
    width:100%;
    height:250px;
}

.post{
   width:360px;
   padding: 30px 30px 0 30px;
}

.post h3{
   padding-bottom: 0;
}

<main>
  <h3 class="postagens">Postagens</h3>
  <div id="postagens">
      <div class="post">
          <img src="../image/postagem.jpg">
          <h3>Estou criando uma área de postagens no meu site (html5 e css3), para fazer o layout dela utilizei flexbox</h3>
      </div>

      <div class="post">
          <img src="../image/postagem.jpg">
          <h3>Estou criando uma área de postagens</h3>
      </div>

      <div class="post">
          <img src="../image/postagem.jpg">
          <h3>Estou criando uma área de postagens</h3>
      </div>

      <div class="post">
          <img src="../image/postagem.jpg">
          <h3>Estou criando uma área de postagens</h3>
      </div>

      <div class="post">
          <img src="../image/postagem.jpg">
          <h3>Estou criando uma área de postagens</h3>
      </div>

      <div class="post">
          <img src="../image/postagem.jpg">
          <h3>Estou criando uma área de postagens</h3>
      </div>
  </div>
</main>

Answer 2

Man you’re putting on margin-bottom in the image, and should actually put that margin on container in which the image is inside in the truth.

To place the margin on container that the image is inside I used a selector that picks up any element that starts with the class post... and puts the margin-botton in it

[class^="post"] {
  margin-bottom:100px;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.postagens {
    text-transform: uppercase;
    font-size:26px;
    margin-top:100px;
    text-align: center;
}

#postagens {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#postagens img {
    border:1px solid red;
    width:360px;
    height:250px;
    margin-left:30px;
    margin-right:30px;
}

[class^="post"] {
  margin-bottom:100px;
}

<main>
  <h3 class="postagens">Postagens</h3>
  <div id="postagens">
      <div class="post1">
          <img src="https://www.placecage.com/100/100">
          <h3>Titulo da primeira imagem</h3>
      </div>

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

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

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

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

      <div class="post6">
          <img src="../image/postagem.jpg">
      </div>
  </div>
</main>