The flex layout sets the last element to the right margin-left: auto

example

<div class="parent">
	<div class='son1'>A</div>
	<div class='son2'>B</div>
	<div class='son3'>C</div>
</div>

	.parent {
    
    
		display: flex;  ⭐️⭐️⭐️
		align-items:center;
		width: 300px;
		height: 50px;
		border: 1px solid black;
	}
	
	.son1,.son2,.son3 {
    
    
		height: 30px;
		line-height: 30px;
		width: 30px;
		border: 1px solid black;
		border-radius: 4px;
		text-align: center;
	}
	
	.son1,.son2 {
    
    
		margin-left: 10px;
	}
	.son3 {
    
    
		margin-left: auto;   ⭐️⭐️⭐️
		margin-right: 10px;
	}