# Place 3 elements inside Flexbox

**URL:** https://forum.kirupa.com/t/place-3-elements-inside-flexbox/643341
**Category:** programming
**Created:** [June 22, 2020, 10:02pm UTC](https://forum.kirupa.com/t/place-3-elements-inside-flexbox/643341 "2020-06-22T22:02:24Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)
#### Post date: [June 22, 2020, 10:02pm UTC](https://forum.kirupa.com/t/place-3-elements-inside-flexbox/643341/1 "2020-06-22T22:02:24Z")

</div>

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](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/d/d23185c614d283e55ff5af0843d9228772fbab1e.jpeg)

Thank you very much in advance for your help.

Helena

---

<div class="post-metadata">

### Author: ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [June 23, 2020, 7:58am UTC](https://forum.kirupa.com/t/place-3-elements-inside-flexbox/643341/2 "2020-06-23T07:58:48Z")

</div>

“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 */
```

---

<div class="post-metadata">

### Author: ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)
#### Post date: [June 23, 2020, 7:12pm UTC](https://forum.kirupa.com/t/place-3-elements-inside-flexbox/643341/3 "2020-06-23T19:12:35Z")

</div>

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

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [June 24, 2020, 12:18am UTC](https://forum.kirupa.com/t/place-3-elements-inside-flexbox/643341/4 "2020-06-24T00:18:35Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Helena\_G](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/helena_g/32/11549_2.png) [@Helena\_G](https://forum.kirupa.com/u/Helena_G)
#### Post date: [June 24, 2020, 3:17pm UTC](https://forum.kirupa.com/t/place-3-elements-inside-flexbox/643341/5 "2020-06-24T15:17:17Z")

</div>

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