【方法一】：模拟 space-between 和间隙,也就是我们不使用 justify-content:space-between 声明在模拟两端对齐效果。中间的 gap 间隙我们使用 margin 进行控制。

【方法二】：根据个数最后一个元素动态 margin由于每一列的数目都是固定的，因此，我们可以计算出不同个数列表应当多大的 margin 值才能保证完全左对齐。

例如，假设每行 4 个元素，结果最后一行只有 3 个元素，则最后一个元素的 margin-right 大小是“列表宽度+间隙大小”的话，那最后 3 个元素也是可以完美左对齐的。

然后，借助树结构伪类数量匹配技术（这篇文章“伪类匹配列表数目实现微信群头像 CSS 布局的技巧”中的布局技巧就是借助这种技术实现），我们可以知道最后一行有几个元素。

例如：

有时候，每一个 flex 子项的宽度都是不固定的，这个时候希望最后一行左对齐该如何实现呢？

由于此时间隙的大小不固定，对齐不严格，因此，我们可以直接让最后一行左对齐即可。具体方法有两个：【方法一】：最后一项 margin-right:auto

【方法二】：创建伪元素并设置 flex:auto 或 flex:1

很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。

学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊- 点击此处 ，

同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。

————————————————

1.什么是flex

flex 是 Flexible Box 的缩写,意为 弹性布局

flex布局中把一个元素作为容器，容器中的子元素称为项目

可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。

2.flex布局的方向

flex布局项目的排列方向可以有两个维度，一水平，二垂直

项目排列方向称为主轴，与主轴垂直的方向叫交叉轴

在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。

2.1 flex水平布局

在水平维度，默认方向是从左至右

可以通过 flex-direction：row-reverse设置为从右到左排列

效果图：

1).默认方向,从左至右2).反方向2.2 垂直布局

效果图：

1).默认方向，从上到下2).反方向3. 容器内项目换行

通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。

不换行的称为单行容器，换行的称为多行容器

也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用）

效果图：

1).默认不允许换行，项目被压缩2).允许换行，当剩余宽度不足容纳一个项目块时，就换行相关知识：css如何实现边框长度控制功能

详细介绍css中的数学表达式calc()

关于书籍：需要学习资料的小伙伴们可以加群， 点击此处

布局类型：

1、浮动+定位

2、自适应（百分比）

3、响应式布局

4、弹性布局（flex布局）

弹性布局的优缺点：

1、优点：兼容性支持所有浏览器（Webkit内核的浏览器要加上-webkit-），可以随用户的喜好进行调节，可以将任何一个容器指定为Flex布局；

2、缺点：弹性布局较复杂，需兼容IE6；

注意：当使用了弹性布局，在css中的float、clear和vertical-align就会失效

1、flex-direction弹布局方向即容器方向

row：默认方向，从左到右

row-reverse：从右向左

column：从上到下

column-reverse：从下到上

2、flex-wrap换行

nowrap：默认不换行

wrap：向下换行

wrap-reverse：向上换行

3、flex-flow方向和换行的简写

例如，flex-flow：row nowrap；

4、justify-content容器方向上的对齐方式

flex-start：默认向左对齐

flex-end：向右对齐

center：居中对齐

space-between：两端对齐，子元素之间有间隔，子元素与边框之间无间隔

space-around：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍

5、align-items默认垂直容器方向上的对齐方式

flex-start：垂直方向的起点对齐

flex-end：垂直方向的终点对齐

center：垂直方向的中点对齐

baseline：与第一个子元素中文字的基线对齐

stretch（默认值）：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度

6、align-content子元素两种方向上的对齐

flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐

flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐

center：当容器方向子元素刚好填满时，与垂直方向的中点对齐

space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等间距间隔

space-around：两个方向两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍

stretch（默认值）：沾满整个垂直方向

1、order排序，integer（整数），数值小的在前面

2、flex-grow放大比例，number，默认值为0

3、flex-shrink缩小比例，number，默认值为1

注：给所有子元素设置该属性为1，当空间不足时，所有子元素将等比例缩小平分所有空间。如果单独给某个子元素设置为0，那么该子元素将空间不足时不缩小。

4、flex-basis属性

该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。

5、flex属性：flex-grow、flex-shrink和flex-basis的简写

6、align-self属性

该属性允许设置过额子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性

auto（默认值）：表示默认继承父级的align-items属性

flex-start：垂直方向的起点对齐

flex-end：垂直方向的终点对齐

center：垂直方向的中点对齐

baseline：与第一个子元素中文字的基线对齐

stretch（默认值）：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度

    Flex布局也称弹性布局（flexiblebox）模块，主要是为了提供一个更有效的方式对容器之间的各项内容进行布局。弹性布局的主要思想是让容器能根据需要改变项目的宽度和高度，以填满可用空

间，满足所有类型的显示设备和屏幕尺寸。因此弹性布局模块的大小是未知或者动态变化的。

    采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器“。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目“。Flex布局比较适合用于小规模的布局，比如应用程序中的组件布局。Flex布局容器默认存两条轴：水平主轴（main

axis）和垂直的交叉轴（cross axis）。主轴的开始位置与边框的交叉点叫作main start。结束位置叫作main

end；交叉轴的开始位置叫作cross start，结束位置叫作cross end。项目默认沿主轴排列。

1.给父元素加上display:flex开始盒子布局

row    |    row-reverse    |    column    |    column-reverse

（1）row（默认值）：主轴为水平方向，起点在左端。

（2）row-reverse：主轴为水平方向，起点在右端。

（3）column：主轴为垂直方向，起点在上沿。

（4）column-reverse：主轴为垂直方向，起点在下沿。

nowrap    |    wrap    |    wrap-reverse

（1）nowrap：不换行

（2）wrap ：换行。第一行在上方

（3）wrap-reverse：换行。第一行在下方

flex-start    |    flex-end    |    center    |    space-between    |    space-around    

（1）flex-start（默认值）：左对齐

（2）flex-end：右对齐

（3）center： 居中

（4）space-between：两端对齐，项目之间的间隔都相等

（5）space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

flex-start    |    flex-end    |    center    |    baseline    |    stretch

（1）flex-start：交叉轴的起点对齐

（2）flex-end：交叉轴的终点对齐

（3）center：交叉轴的中点对齐

（4）baseline: 项目的第一行文字的基线对齐

（5）stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

auto    |    flex-start    |    flex-end    |    center    |    baseline    |    stretch

该属性可取6个值，除了auto，其他都与align-items属性完全一致。

(完)

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

display: flex;display: inline-flex;

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

以下6个属性设置在容器上。

flex-direction属性决定主轴的方向（即项目的排列方向）。

它可能有4个值。

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

它可能取三个值。

（1）nowrap（默认）：不换行。

（2）wrap：换行，第一行在上方。

（3）wrap-reverse：换行，第一行在下方。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content属性定义了项目在主轴上的对齐方式。

它有5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

align-items属性定义项目在交叉轴上如何对齐。

它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

该属性可能取6个值。

小结：justify 是对主轴对齐方式。align开头的都是对交叉轴进行排列的项目。

以下6个属性设置在项目上。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

接下来需要添加一些Css弹性盒子：桃园三兄弟之：flex-grow、flex-shrink、flex-basis详解

参考文章：https://blog.csdn.net/m0_37058714/article/details/80765562

当我们使用flex布局，可以自动换行的时候，经常会出现最后一个布局，没有自动跟在最后一个。因为我们设置flex的content属性是space-between。

解决办法：通过给父级添加after伪类法，解决最后一排数量不够两端分布的情况。原理：after伪类是在最后的时候，添加一个对应的css，这种三等分的情况，最后一个宽度要设置33%。给一个高度，占位。

当我们使用flex布局并设置自动换行时，最后一行的元素不会按照我们的预期靠左布局，如：

css:

结果：

结果：

可能会出现的问题：当子元素数量少无法占满父元素的宽度时，会出现以下问题：

传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为“弹性布局“，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！

1. 主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上flex-direction: row | row-reverse | column | column-reverse2. 换行：不换行（默认） | 换行 | 换行并第一行在下方flex-wrap: nowrap | wrap | wrap-reverse3.主轴方向和换行简写flex-flow: 《flex-direction》 || 《flex-wrap》4.主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布justify-content: flex-start | flex-end | center | space-between | space-around5.交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认）align-items: flex-start | flex-end | center | baseline | stretch6.多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。（默认）align-content: flex-start | flex-end | center | space-between | space-around | stretch

1. 排序：数值越小，越排前，默认为0order: 《integer》2.放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推）flex-grow: 《number》; /* default 0 */3.缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。）flex-shrink: 《number》; /* default 1 */4.固定大小：默认为0，可以设置px值，也可以设置百分比大小flex-basis: 《length》 | auto; /* default auto */5.flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 autoflex: none6.单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满align-self: auto | flex-start | flex-end | center | baseline | stretch

这写的很乱，我看着都乱凑合看吧！！！

传统布局：

flex布局：

使用范围：1、如果是PC端页面布局，建议使用传统布局2、如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局

flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局

在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，默认的侧轴方向是从上往下。flex-direction属性决定主轴的方向，也就是决定着子元素的排列方向，其中，主轴和侧轴是会变化的，就看flex-direction设置谁作为主轴，子元素就会跟着作为主轴的来排列布局。

设置侧轴排列

justify-content属性定义了项目在主轴上的对齐方式，使用前提必须确定好谁是主轴.

默认情况下，子元素都排在一条线上（主轴），flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。

align-items设置侧轴上的子元素的排列方式(单行的)，这个属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单个元素的时候去使用。

设置子元素在侧轴上的排列方式，并且只能用于子元素出现在换行的情况中，在单行下是没有任何效果的。

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex布局中子元素也存在着相对应的一些属性

flex属性定义子元素分配剩余空间，用flex来表示占的多少份，默认为0针对这个，可以先了解有名的CSS布局圣杯布局以及双飞翼布局,大致的效果为两边盒子固定，中间自适应。使用flex布局来做的话，就是去处理剩余空间的份数。

align-self属性允许单个的子元素与其他子元素不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch。

order去控制子元素的排列顺序，数值越小的，排列越靠前，默认为0

首先给每个子元素设置一个order值，需要调到前面的，单独提出来将order值设小点即可，想要放到后面order值设大点即可。

overflow: hidden;

    word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;下面是使用.one-line-title{

    overflow: hidden;

    word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 1;

}

.order-item {

display: flex;

width: calc(100%);

background-color: #ffffff;

align-items: center;

padding-left: 12px;

padding-right: 8px;

margin-bottom: 25px;

}《view class=“order-item“ v-for=“(item, index) in flowList“ :key=“index“》

《u-checkbox @change=“checkboxChange“ shape=“circle“ active-color=“#D2A36C“ v-model=“item.checked“》

《/u-checkbox》

《view style=“margin-start:9px; width: 80px;height: 80px“》

《image :src=“item.image“ style=“width: 80px;height: 80px“ :index=“index“》《/image》

《/view》

《view style=“margin-left: 10px;“》

《view class=“one-line-title“》{{ item.description }}《/view》

《view class=“sku-layout“》

《view class=“sku-title“》颜色：红色  尺寸：L《/view》

《view class=“money“》¥138.00《/view》

《/view》

《view class=“sku-layout“》

《view class=“delivery“》未发货《/view》

《view class=“num“》x1《/view》

《/view》

《/view》

《/view》