Boky Boky - 1 month ago 17
Sass (Sass) Question

Right align text on display flex

My code is as follows :

<div className="listContent">
<div>
<div className="titleAndCounterBox">
<div className="headerListTitle">{list.name}</div><br />
<div className="headerListExpires">
<div>{formatTime(this.state.remainingTime).days}<span>{language.days}</span></div>
<div>{formatTime(this.state.remainingTime).hours}:{formatTime(this.state.remainingTime).minutes}:{formatTime(this.state.remainingTime).seconds}</div>
</div>
</div>
<div><img src={images.header_listInfo_png} /></div>
<div className="headerTotalCarsInTheList"><span>{totalCarsInTheList}</span></div>

</div>
</div>


And my scss is as follows:

.listContent {
display: flex;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
font-family: $remarketingFontFamily;

div {
display: flex;
align-items: center;

.titleAndCounterBox {
flex-wrap: wrap;

.headerListTitle {
font-size: $portalFontSize - 1;
color: $portalBlueColor;
flex-basis: 100%;
}

.headerListExpires {
font-size: $portalFontSize - 3;
color: $portalYellow;

div:first-child {
margin-right: 15px;
}
}
}

.headerTotalCarsInTheList {

text-align: center;
line-height: 40px;
color: $portalDarkGrey;
font-size: $infoTextSize + 6;
border: 1px solid $portalDarkGrey;
border-radius: 50%;
margin: 0 15px;

span{
width: 40px;
height: 40px;
}
}
}


}


The listContent (parent div) looks like this :

enter image description here

And the titleAndCounterBox looks like this :

enter image description here

What I want is that the text inside titleAndCounterBox is right aligned. Something like :

enter image description here

But I'm not able to acommplish that.

Any advice how can I do that?

Answer

You could change your CSS slightly :-) thanks to our discussion

.headerListTitle { 
   font-size: $portalFontSize - 1; 
   color: $portalBlueColor;

   margin-left: auto; 
   flex-basis: 58%; 
  //you could replace these 2 lines with below 2 lines if you wish

  //justify-content: flex-end;
  //flex-basis: 89% (same as below row)

} 

.headerListExpires { 
   font-size: $portalFontSize - 3; 
   color: $portalYellow; 
   flex-basis: 89%; 

   div:first-child { 
      margin-left: auto; 
      margin-right: 15px; 
   } 
}
Comments