将弹性项目向左对齐

Question

我已经对齐了弹性项目，justify-content: space-around;在下面给出的示例中，我需要将最后一项向左对齐。请帮忙。

.wrapper {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.block {
width: 30%;
border: 1px solid red;
margin-bottom: 20px;
}

<div class="wrapper">
<div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, </div>
<div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, vitae venenatis est ultricies blandit. Aenean augue enim, </div>
<div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, </div>
<div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, vitae venenatis ela enim, dignissim non </div>
</div>

Answer 1

使用边距而不是justify-content: space-around;

.wrapper {
width:100%;
display: flex;  
flex-wrap: wrap;
}
.block {
width: 30%;
margin:0 1.45%;
border: 1px solid red;
margin-bottom: 20px;
float:left;
}

<div class="wrapper">
<div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, </div>
<div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, vitae venenatis est ultricies blandit. Aenean augue enim, </div>
<div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, </div>
<div class="block">orem ipsum dolor sit amet, consectetur adipiscing elit. Morbi elementum dui quam, vitae venenatis ela enim, dignissim non </div>
</div>