将弹性项目向左对齐[重复]答案

【问题标题】：Align flex items to the left [duplicate]将弹性项目向左对齐[重复]
【发布时间】：2018-01-26 15:03:09
【问题描述】：

我使用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>

【问题讨论】：

您确定要使其与左侧对齐，还是要与第一项的左边缘对齐？前者可能，后者绝对不可能。
我想和第一项的左边缘对齐

标签： html css flexbox

【解决方案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>

【讨论】：

问题是可以有任意数量的块。如果只有 2 个块，我需要它们居中对齐。
您想将左对齐设置为第一个项目，并将中心对齐设置为第二个项目！！！！这是css做不到的！可能是 javascript (JQuery)