align-items: center -> align all the items in the center of the screen
justify-content: space-between -> items are evenly distributed in the line; first item is on the start line, last item on the end line
background-size: contain -> fit the size of the image within parent container.
Let’s know bit more->
The justify-content property is a sub-property of the Flexible Box Layout module.
It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
The justify-content property accepts five different values:
flex-start (default): items are packed toward the start line
flex-end: items are packed toward to end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them
space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same
Sample code in LWC
Sample.html
justify-content: space-between -> items are evenly distributed in the line; first item is on the start line, last item on the end line
background-size: contain -> fit the size of the image within parent container.
Let’s know bit more->
The justify-content property is a sub-property of the Flexible Box Layout module.
It defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
The justify-content property accepts five different values:
flex-start (default): items are packed toward the start line
flex-end: items are packed toward to end line
center: items are centered along the line
space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
space-around: items are evenly distributed in the line with equal space around them
space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same
Sample code in LWC
Sample.html
<template>
<div class=‘customSession’>
<div >
<p class=“customTitle”>The Future of javascript demo</p>
<p class=“icon customTime”>12/7/2020 5:20 AM</p>
<p class=“icon customRoom”>Keynote Room</p>
</div>
<div class=“customPicture”>
alt=‘Sandeep’ title=‘Sandeep’>
</div>
</div>
</template>
Sample.css
.customSession {
display: flex;
justify-content: space-between;
border-left: 3px solid #0277bd;
border-radius: 0 0.5rem 0.5rem 0;
align-items: center;
border: 1px solid #dddbda;
margin: 1rem 0;
padding: 1rem;
font-size: 1rem;
}
.customSession .icon {
color: #039be5;
background-repeat: no-repeat;
background-size: contain;
padding-left: 1.75rem;
}
.customSession .customTitle {
font-weight: 600;
font-size: 1.2rem;
color: #039be5;
}
.customSession .customRoom {
margin-top: 0.4rem;
}
.customSession .customTime {
margin-top: 0.6rem;
}
.customPicture {
display: flex;
justify-content: end;
}
.customPicture > img {
border-radius: 50%;
height: 3.5rem;
}
SFDC Arjuna 
