Place 3 elements inside Flexbox

programming
1

Hello. Can’t figure out why my code doesn’t work as I want.

I have 3 elements. I want to place one element in the upper left corner, one in the right bottom corner and one element in the center using Flexbox.

The centered element is not aligned in the center correctly and looks more on the left side.

What I’m doing wrong?

  <div class="container">
    <div class="team">
                <p class="team-info">Info</p>
                <h5 class="team-desc">We are the industry gurus when it comes to digital</h5>
                <p class="team-cta"><a href="#">LEARN MORE</a></p>
         </div>
      </div>



      .container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 900px;
      }
        .team {
         display: flex;
         align-items: center;
         justify-content: center;
         background-image: url('../img/team-bg-1.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         height: 400px;
         width: 900px;
         color:white;
        }
        .team-info {
         align-self: flex-start;
        }
        .team-desc {
         display: flex;
         align-self: center;
         justify-self: center;
         text-align: center; 
         font-size: 34px;
        }
        .team-cta {
         align-self: flex-end;
         text-decoration: underline;  
        }

Screenshot 2020-06-22 at 23.55.37
Screenshot 2020-06-22 at 23.55.371800×800 128 KB

Thank you very much in advance for your help.

Helena

2

“LEARN MORE” is longer than “info” so its pushing the middle text to the left. You probably want rows instead of columns. For that, use this for .team:

justify-content: space-between; /* <-- replaces center */
flex-direction: column; /* <-- new */
1 Like
3

Thank you very much, @senocular This helps me a lot.

1 Like
4

Another option to consider might be to use the CSS Grid. It makes complex two-dimensional arrangements more straightforward :cookie:

5

Thank you for your answer, @kirupa I will think about it.