将弹性项目对齐到左侧

Question

我使用justify-content: space-around;对齐了flex项目在下面给出的示例中，我需要将最后一项对齐到左侧。请帮忙。

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.block {
  width: 30%;
  border: 1px solid red;
  margin-bottom: 20px;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用保证金代替justify-content: space-around;

＆＃13;

＆＃13;

.wrapper {
  width:100%;
  display: flex;  
  flex-wrap: wrap;
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;