flex布局使用space-between后最后一行左对齐_space-between 最后一行左对齐

不完美实现方案

1、使用inline-block

直接在css中使用 display:inline-block ，就可以实现效果

效果如图：

目前是完全符合上面的需求的，但是我们会发现，第一行最后一个位置，因为容纳不下下一个元素了，所以直接换行显示下一个元素，这样就导致最后的空隙很大，很影响美观

2、使用flex

有朋友可能会想，这个不是很简单，直接使用 flex 布局，然后使用 justify-content: space-between 不就可以完美的解决空隙大的问题啦，而且看起来很很和谐，使用这个方法确实可以让第一行的空隙变得很完美，但是我们会发现另外一个问题

效果如图：

可以看到，我们的第一行的确是完美的解决了空隙大的问题，但是随之而来的，就是第二行因为使用了 justify-content: space-between ，导致下面直接把剩下的元素直接平均分了，很明显这样是会导致最后一行元素，不够铺满，而直接平均分了，这样也是不行的，那到底要怎么来解决问题呢

完美实现方法

如图所示，这就是我们说需要的效果，最后一行元素不够铺满一行时，让元素左对齐排列，那这样是如何实现的呢

其实实现方法很简单，同样是使用 flex 布局，并且使用 justify-content: space-between 属性

关键一步，我们在当前元素的伪元素 after 添加 flex：auto 即可实现

.parent{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &::after {
    content: '';
    flex: auto;
确实非常简单，我们看下原理 
就是通过伪元素让伪元素的宽度正好补齐剩余的宽度，这样就相当于是一整行铺满，所以就不会出现上面的直接将下面的几个元素直接平均分了 
Tips:方法简单粗暴，可能有更好的办法，但是UP也是想分享自己在开发过程中遇到的问题是如何解决的，如果有更好的办法，也欢迎大家相互讨论相互学习
本文的解决方案不止适用于 Vue（只不过用它做示例），原生 JS 或其他框架均可借助该算法完成。
使用 flex 布局时，设置 justify-content: space-around / space-between 属性后，会出现如下图所示问题：
我们希望最后一行 居左对齐 排列，如下图所示：
解决方案有很多种，本文使用 补齐元素 方式完成，而非 :after 插入或更改布局。
Gitee 仓库地址（代码中有超级详细的注释）：https://gitee.com/wangjia
				flex布局设置space-between(around)最后一行不左对齐问题
需求在项目布局上使用弹性布局，要求每个盒子两端要对齐，而且最后一行在列不满的情况下要求左对齐；
问题： 使用flex的设置justify-content为space-between;发现最后一行不能左对齐，而是两端对齐方式导致形成下图，
一、添加几个空格子，格子高度为0
<!DOCTYPE html>
<html lang="en">
	<meta charset
				给盒子设置 justify-content: space-between ， 可以均匀排列盒子中的每个元素，首个元素放置于起点，末尾元素放置于终点。达到左右对齐的效果。但当最后一行元素不能铺满盒子时，会在盒子中均分排列，效果并不是我们需要的。
盒子设置flex布局， 对齐方式设置 justify-content: space-between时，将最后一行元素左对齐，有一下几种方法：特点：适用于任意列数布局，比较简单，缺点是会产生空标签
方案：使用循环体循环一整行空元素。宽度为单个元素宽度，高度为0codeh
				今天在尝试拼小程序界面的时候一直想换种口味。于是想使用flex布局，小程序支持flex也比较好。今天遇到一个问题就是要实现一个一左，一右，方式布局。之前习惯了用绝对布局的方式，可以将右边的元素实现right 0 处理。细心想了一既然使用flex布局肯定可以实现。找了一些资料看，space-between 在两个子元素下 可以实现左右对齐的效果。 
下面，看一下实现。创建小程序页面，对文件编写如下的...
此处的情况为总数固定不变，每一页轮播图固定是十个元素。核心思想即，在最后一页，元素数量不足十的时候，用空元素补足，以达到想要的布局（即从左到右依次布局）。
<view v-for="(w, j) in v" :key="j">
				如果你想让一行中的元素左对齐，并且每个元素之间有相同的间距，可以使用 `display: flex` 和 `justify-content: space-between` 属性。具体地说，你可以按照以下步骤进行设置：
1. 给包含元素设置 `display: flex` 属性，这样它们就可以按照一行排列。
2. 给包含元素设置 `justify-content: space-between` 属性，这样它们就会在水平方向上平均分布，每个元素之间的距离相同。
3. 如果你希望一行中最多只显示3个元素，可以给每个元素设置一个固定的宽度，并使用 `flex-wrap: wrap` 属性将多余的元素换行。
下面是一个示例代码：
```html
<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
```css
.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
.item {
  width: 30%;
在上面的示例中，`container` 是包含所有元素的容器，每个元素都有一个 `item` 类。设置了 `width: 30%;` 属性，使得每行最多只能显示3个元素，剩余的元素会换行。设置了 `justify-content: space-between;` 属性，使得每个元素之间的距离相同，并且左对齐。