CODEWITHSUNDEEP
htmlcssflexbox
Tameiki
Tameiki

Reputation: 45

Inline two elements and put one elements below the others using flexbox

I'm trying to use flexbox in order to make the pop-up of my dialog modal. I followed the examples given by Froggy but I have a little problem that I can't resolve. So I would like to ask some help please.

Here is what I want to do:

enter image description here

: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>

Like you can see I have little shift on the right for the first container then my rows became columns. I tried to use row-wrap and flex-direction to change it by I can't...

I thank in advance anybody who would take the time to help me.

EDIT:

enter image description here

Upvotes: 0

Views: 55

Answers (3)

sarah ahmed
sarah ahmed

Reputation: 55

you can try it:

: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>

Upvotes: 1

symlink
symlink

Reputation: 12209

You can achieve this more easily with a simplified HTML structure and 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>

Upvotes: 1

acincognito
acincognito

Reputation: 1743

Here's a stackblitz to see the code in action: https://stackblitz.com/edit/typescript-88qjka?file=style.css I didnt do an angular project there, just plain html, but there should be no difference.

Try this:

<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;
 }

Btw: since you are using angular I'd recommend that you create a designated ManagerComponent and loop over some array/object with ngFor to put these into the html (if you arent already doing it).

Upvotes: 1

Related Questions