منابع :
https://hitos.ir
http://css-tricks.ir
<html>
<head>
<style>
.flex-container
{
display: flex;
background-color: #0e9596;
padding:20px;
justify-content:center;
align-items: flex-end ;
align-content: space-around;
flex-flow: row wrap;
}
.flex-item
{
margin: 10px 0;
}
.flex-item
{
padding: 20px;
margin:5px;
border:1px solid #000
text-align: center;
background-color: #ffffff;
font-weight: bold;
width: calc(50% - 52px);
}
</style>
<title ></title>
</head>
<body>
<div class="flex-container">
<div class="flex-item">One</div>
<div class="flex-item">Two</div>
<div class="flex-item">Three</div>
<div class="flex-item">Four</div>
</div>
</body>
</html>
