Вставьте два элемента и поместите один элемент ниже остальных, используя flexbox

Question

Я пытаюсь использовать flexbox, чтобы всплывающее окно моего диалога было модальным. Я последовал примеру Фрогги, но у меня есть небольшая проблема, которую я не могу решить. Поэтому я хотел бы попросить некоторую помощь, пожалуйста.

Вот что я хочу сделать:

:host{
  position: absolute;
  top:0;
  left:0;
  background: rgba(0, 0, 0, 0.5);
  height : 100vh;
  width: 100vw;
  z-index: 1000;
  display: flex;
  justify-content:center;
  align-content: center;
  }
.Modal{
  background: white;
}
.LogoImage{
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
  border-radius: 7%;
}
.ManagerLayout{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.ManagerInfo{
  display: flex;
  flex-flow: column wrap;
}

<div class="Modal">
  <div><h1 class="ManagerTitle">Managers make you feel better !</h1></div>
  <div class="ManagerLayout">
    <div class="logo"><img class="LogoImage" [src] = ""></div>
    <div class="ManagerInfo">
      <div class="ManagerName">ManagerName</div>
      <div class="ManagerCible">ManagerCible</div>
      <div class="ManagerCost">ManagerCost</div>
    </div>
    <button mat-raised-button id="HireButton" (click)="hireManager(manager)"> Hire !</button>
    </div>
    <div class="logo"><img class="LogoImage" [src] = ""></div>
    <div class="ManagerInfo">
      <div class="ManagerName">ManagerName2</div>
      <div class="ManagerCible">ManagerCible2</div>
      <div class="ManagerCost">ManagerCost2</div>
    </div>
    <button mat-raised-button id="HireButton" (click)="hireManager(manager)"> Hire2 !</button>
    <div class="ManagerInfo">
      <div class="ManagerName">ManagerName3</div>
      <div class="ManagerCible">ManagerCible3</div>
      <div class="ManagerCost">ManagerCost3</div>
    </div>
    <button mat-raised-button id="HireButton" (click)="hireManager(manager)"> Hire3 !</button>
</div>

Как вы можете видеть, у меня есть небольшое смещение справа для первого контейнера, тогда мои строки стали столбцами. Я пытался использовать обтекание строк и flex-direction, чтобы изменить его, потому что я не могу ...

Заранее благодарю всех, кто нашел бы время, чтобы помочь мне.

РЕДАКТИРОВАТЬ:

Answer 1

Этого легче достичь с помощью упрощенной структуры HTML и CSS Grid:

html, body{height: 100%;}

h1{text-align:center}

.grid{
    display:grid;
    grid-template-columns: .2fr 1fr .2fr;
    height: 80%;
    text-align:center;
    grid-gap: 30px;
}

.txt{
    align-self: center;
}

<h1>Managers make you feel better!</h1>
<div class="grid">
    <img src="https://placekitten.com/200/200">
    <div class="txt">
        ManagerName<br>
        ManagerCible<br>
        ManagerCost
    </div>
    <button>Hire!</button>
    
    <img src="https://placekitten.com/200/200">
    <div class="txt">
        ManagerName2<br>
        ManagerCible2<br>
        ManagerCost2
    </div>
    <button>Hire2!</button>
    
    <img src="https://placekitten.com/200/200">
    <div class="txt">
        ManagerName3<br>
        ManagerCible3<br>
        ManagerCost3
    </div>
    <button>Hire3!</button>
</div>

Answer 2

Вы можете попробовать это:

:host{
  position: absolute;
  top:0;
  left:0;
  background: rgba(0, 0, 0, 0.5);
  height : 100vh;
  width: 100vw;
  z-index: 1000;
  display: flex;
  justify-content:center;
  align-content: center;
  }
.Modal{
  background: white;
}
h1{
  text-align:center
}
.LogoImage{
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
/*   border-radius: 7%; */
  border-radius:20px;
  border:2px solid #000;
}
.ManagerLayout{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
/*   justify-content: center; */
  justify-content: space-between;
  width:500px;
  margin:auto;
}
.ManagerInfo{
  display: flex;
  flex-flow: column wrap;
  align-self:center;
}
#HireButton
{
   width: 100px;
  height: 100px;
  border-radius:20px;
}

<div class="Modal">
  <div>
    <h1>Managers make you feel better !</h1>
  </div>
  
  <div class="ManagerLayout">
<div class="logo"><img class="LogoImage" [src] = ""></div>
    <div class="ManagerInfo">
      <div class="ManagerName">ManagerName</div>
      <div class="ManagerCible">ManagerCible</div>
      <div class="ManagerCost">ManagerCost</div>
    </div>
    <button mat-raised-button id="HireButton" (click)="hireManager(manager)"> Hire !</button>
    </div>
  

Answer 3

Вот стек, чтобы увидеть код в действии: https://stackblitz.com/edit/typescript-88qjka?file=style.css Я не делал проект angular, просто html, но не должно быть никакой разницы.

Попробуйте это:

<div class="Modal">
  <div><h1 class="ManagerTitle">Managers make you feel better !</h1></div>
  <div class="ManagerLayout">
   <div class="logo"><img class="LogoImage" [src] = ""></div>
   <div class="ManagerInfo">
   <div class="ManagerName">ManagerName</div>
   <div class="ManagerCible">ManagerCible</div>
   <div class="ManagerCost">ManagerCost</div>
  </div>
 <button mat-raised-button id="HireButton" (click)="hireManager(manager)">Hire !</button>
</div>
<div class="ManagerLayout">
  <div class="logo"><img class="LogoImage" [src] = ""></div>
  <div class="ManagerInfo">
    <div class="ManagerName">ManagerName2</div>
    <div class="ManagerCible">ManagerCible2</div>
    <div class="ManagerCost">ManagerCost2</div>
  </div>
  <button mat-raised-button id="HireButton" (click)="hireManager(manager)"> Hire2 !</button>
</div>
<div class="ManagerLayout">
  <div class="logo"><img class="LogoImage" [src] = ""></div>
  <div class="ManagerInfo">
  <div class="ManagerName">ManagerName3</div>
  <div class="ManagerCible">ManagerCible3</div>
  <div class="ManagerCost">ManagerCost3</div>
</div>
<button mat-raised-button id="HireButton" (click)="hireManager(manager)"> Hire3 !</button>
  </div>
  </div>

CSS:

:host{
  position: absolute;
  top:0;
  left:0;
  background: rgba(0, 0, 0, 0.5);
  height : 100vh;
  width: 100vw;
  z-index: 1000;
  display: flex;
  justify-content:center;
  align-content: center;
}
.Modal{
  background: white;
 }
.LogoImage{
  margin: 0;
  padding: 0;
  width: 100px;
  height: 100px;
  border-radius: 7%;
 }
.ManagerLayout{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
 }
 .ManagerInfo{
  display: flex;
  flex-flow: column wrap;
 }

Кстати: поскольку вы используете angular, я бы порекомендовал вам создать назначенные ManagerComponent и l oop поверх некоторого массива / объекта с помощью ngFor, чтобы поместить их в html (если вы еще этого не делаете).