flex布局换行间距如何控制,flex 布局换行后最后一行左对齐

1.flex-direction属性

取值：row(默认) | row-reverse | column | column-reverse

用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序1-2-3；row-reverse同为横向排列，但项目顺序为倒序3-2-1。

column 与row相反，为纵向排列，项目顺序为正序1-2-3，column-reverse同为纵向排列，项目顺序为倒序3-2-1。

取值：nowrap(默认) | wrap | wrap-reverse

用于控制项目是否换行，nowrap表示不换行；

举个例子：比如容器宽度为300px，容器中有6个宽度为60px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有50px了，而非我们自己设置的60px。

wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。

wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。

flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。

4.justify-content属性

取值：flex-start(默认) | flex-end | center | space-between | space-around | space-evenly;

用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center 为居中，对应的flex-end为右对齐。

space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。

space-around为项目之间间距为左右两侧项目到容器间距的2倍，比较特别的布局，日常使用不太多。

space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。

** 5.align-items属性**

取值：flex-start | flex-end | center | baseline | stretch(默认)

用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为60px。

flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：

center使用最多，自然不会陌生，在纵轴中心位置排列：

baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：

注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。 6.align-content

取值：flex-start | flex-end | center | space-between | space-around | space-evenly | stretch(默认);

用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的12个项目我均没有设置高度。

flex-start ，center，flex-end 与align-items属性表现一致：

space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。

space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。

align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。 介绍完容器属性，简单介绍下项目属性。容器属性是加在容器上的，那么项目属性呢，就是写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思。

1.order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

2.flex-grow

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

3.flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

上图中第二个项目flex-shrink为0，所以自身不会缩小。

4.flex-basis

取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。

上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。

5.flex

取值：默认0 1 auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。

该属性有两个快捷键值，分别是auto(1 1 auto)等分放大缩小，与none(0 0 auto)不放大不缩小。

6.align-self

取值：auto(默认) | flex-start | flex-end | center | baseline | stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。

用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
前端应知应会：flex布局详解

前端应知应会：flex布局详解

flex布局可以说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门讲解一下。

flex布局全称flexible box布局模型，是一种比较高效的css3布局方案

通过设置元素的display属性，改成flex属性

来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flex item的默认布局规则排列。

首先看下容器的属性：

1、flex-direction

决定主轴的方向，

默认值是row即横向从左往右的顺序进行排列。

其他选项值还有row-reverse、column、column-reverse

2、flex-wrap

它决定了如果轴线排列不下去的话，如何进行换行

默认是不进行换行，继续沿着主轴方向放置。

其它选项还有：wrap（换行）、wrap-reverse（换行、但是位置跟wrap相反）

3、flex-flow

它是flex-firection和flex-wrap的简写

4、justify-content

该属性定义了item在主轴上的对齐方式

默认值是：flex-start即顺着主轴方向排列对齐

其他还有flex-end：逆着主轴方向并从最远处往主轴起点排列

center：居中

space-between：两端对齐，项目之间间隔相等

space-around：每个项目两侧留白距离相等

5、align-items

该属性定义了项目在交叉轴上如何对齐

毕竟，每个item的高度不一定完全一样。

它的默认值是stretch：即如果item没有设置高度或者是auto，则会占据整个容器的高度

其他还有flex-start、flex-end、center、baseline

6、align-content

它跟align-items的区别就是，该属性定义的是多跟轴线的对齐方式

该参数有六个可选项：

flex-start、flex-end、center、space-between、space-around、stretch

这里面要记得的是处于不同轴线上的item不会遮挡，即如果某个轴线上有两个不同高度的item，那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。

针对item，也有一些属性可以设置

1、order决定了项目的排列顺序，可以通过设置该属性将对应的item往前排列

2、flex-grow，决定了item的放大比例，默认为0不进行放大。

3、flex-shrink，定义了item的缩小比例，默认为1，如果空间不够的话所有轴线上的item将进行同比缩小，如果为0则该item不进行缩小

4、flex-basis，定义item在轴线上占据的宽度，如果没设置的话，就按item自身的宽度进行分配

5、align-self。定义item在轴线纵向的排列方式，可以替换掉对应flex容器的align-items属性，为该item设置专门的对齐方式

下面再举个例子

flex 布局换行后最后一行左对齐

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

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

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

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

例如：

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

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

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

flex 怎么设置 自动换行的布局

flex-align：默认是设置垂直方向的对齐方式，值： start、end、center、stretch、baseline。
flex-pack：设置子元素之间如何分配多余空间，值：start、end、center、justify。
flex-direction：设置子元素的排列方式， row、row-reverse、column、column-reverse。
flex-wrap：设置子元素的是否自动换行和排列方向，值：nowrap、wrap和wrap-reverse。
-ms-flex：设置子元素弹性，参数，分别是正弹性、负弹性和默认大小。
其实布局还有好多新玩法，你可以多看看相关的教程，比如说现在有个视频的系列名称叫做 《Buid New World》，里面有一集专门讲 CSS3 复杂布局形式

Flex语法——弹性布局

传统的布局，都是基于盒模型，display，float，position，有的时候感觉它做出来的界面缺少一些灵活性，这时候我们就可以使用Flex布局，是Flexible Box的缩写，意为"弹性布局"，它可以让你界面有很大的灵活性。但是你得了解Flex的语法，好了，不多说了，直接上干货！！！
1. 主轴方向：左到右（默认） | 右到左 | 上到下 | 下到上 flex-direction: row | row-reverse | column | column-reverse 2. 换行：不换行（默认） | 换行 | 换行并第一行在下方 flex-wrap: nowrap | wrap | wrap-reverse 3.主轴方向和换行简写 flex-flow:

||

4.主轴对齐方式：左对齐（默认） | 右对齐 | 居中对齐 | 两端对齐 | 平均分布 justify-content: flex-start | flex-end | center | space-between | space-around 5.交叉轴对齐方式：顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 如果项目未设置高度或设为auto，将占满整个容器的高度。（默认） align-items: flex-start | flex-end | center | baseline | stretch 6.多主轴对齐：顶部对齐 | 底部对齐 | 居中对齐 | 上下对齐并铺满 | 轴线占满整个交叉轴。（默认） align-content: flex-start | flex-end | center | space-between | space-around | stretch

1. 排序：数值越小，越排前，默认为0 order:

2.放大：默认0（即如果有剩余空间也不放大，值为1则放大，2是1的双倍大小(约等)，以此类推） flex-grow:

; /* default 0 */ 3.缩小：如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效。） flex-shrink:

; /* default 1 */ 4.固定大小：默认为0，可以设置px值，也可以设置百分比大小 flex-basis:

| auto; /* default auto */ 5.flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 6.单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满 align-self: auto | flex-start | flex-end | center | baseline | stretch

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

flex布局，看完这篇都懂了

flex布局

开启flex布局
display:flex (独占一行)
inline-flex(允许换行)

应用在flex container上的css属性

应用在flex items上的css属性

flex container的属性:

justify-content: 决定了 flex items在主轴(main axis)上的对齐方式
flex-start(默认值):与main start 对齐
flex-end:与main end 对齐
center:居中对齐
space-between: flex items之间的距离相等. 与main start,mian end两端对齐
space-evenly:flex items之间的距离相等. item与mian start,mian end之间的距离等于flex item之间的距离
space-around: flex items之间的具体相等

align-items 决定了flex item在cross axis上的对齐方式

flex-wrap 决定了单行还是多行

flex-flow是 flex-direction || flex-warp的缩写

flex-flow: row-reverse 等价于
flex-direction:row-reverse
flex-wrap:nowrap

align-content 决定了多行flex items在cross axis 上的对齐方式,用法和justify-content类似
stretch(默认值):与align-items的stretch类似 在cross axis上拉伸
flex-start:与cross start对齐
flex-end:与cross end对齐
center:居中对齐

align-self flex items可以通过设置align-self覆盖flex container设置align-items
auto(默认值):遵从flex container的align-items
stretch,flex-start,flex-end,center,baseline效果跟align-items一致

flex-shrink 决定了flex items如何收缩
可以设置任意非负数字(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效
每个flex item收缩的size为
flex items超出flex container的size * 收缩比例/所有flex items的收缩比例之和

收缩比例 = flex - shrink * flex item的base size
base size 就是flex item 放入flex container之前的size
flex items收缩后的最终size不能小于 min-width\min-height

flex-grow 决定了flex items如何扩展
可以设置任意非负数字(正小数,正整数,0),默认值是0
放flex container 在main axis 方向上有剩余size时,flex-grow属性才会有效
如果所有flex items的flex-grow综合sum超过1,每个flex item扩展的size为 flex container的剩余size * flex-grow/sum

如果所有flex items的flex-grow综合不超过1,每个flex item扩展的size为
flex container 的剩余size * flex-grow

flex items 扩展后的最终size不能超过max-width\max-height

举例:flex-direction为row的情况下 父容器宽度 400px 有三个子容器宽度均为100,
flex-grow分别为1,2,3
这样可以得出
A的宽度= 100 * (1/6) + 100 = 116.66
B的宽度 = 100 * (2/6) + 100 = 133.33
C的宽度 = 100 * (3/6) + 100 = 150

若 flex-grow分别为 0.1 ,0.2,0.3,则结果为:
A的宽度= 100 * 0.1 + 100 = 110
B的宽度 = 100 * 0.2 + 100 = 120
C的宽度 = 100 * 0.3 + 100 = 130

flex-shrink 决定了 flex items 如何收缩
可以设置任意非负数组(正小数,正整数,0),默认值是1
当flex items在main axis方向上超过了flex container 的size,flex-shrink属性才会有效

每个flex item 收缩的size为
flex items超出flex container 的size * 收缩比例/所有flex items的收缩比例之和

收缩比例 = flex-shrink * flex item的base size
base size就是flex item 放入 flex container之前的size

flex item收缩后的最终size不能小于min-width\min-height

举例:总容器宽度 500px 一共六个子视图,
宽度分别为110,120,130,140,150,160,
shrink为1,2,3,4,5,6,

总长度:110+120+130+140+150+160 = 810
总共得收缩的长度:810 - 500 = 310
收缩比例 是 flex-shrink * item的 主轴方向的size

sum = 110 * 1 + 120 * 2 + 130 * 3 + 140 * 4 + 150 * 5+ 160 * 6

item1的收缩比例是 110 * 1 需要收缩的具体为 310 * (110 * 1)/sum
item2的收缩比例是 120 * 1 需要收缩的具体为 310 * (120 * 2)/sum
item3的收缩比例是 130 * 1 需要收缩的具体为 310 * (130 * 3)/sum
item4的收缩比例是 140 * 1 需要收缩的具体为 310 * (140 * 4)/sum
item5的收缩比例是 150 * 1 需要收缩的具体为 310 * (150 * 5)/sum
item6的收缩比例是 160 * 1 需要收缩的具体为 310 * (160 * 6)/sum

flex-basis
设置flex items在 main axis方向的base size
auto(默认值) content 取决于内容本身的size

决定flex-item最终base size 的因素 优先级从高到低
max-width max-height min-width min-height
flex-basis
width height
内容本身的size

flex-basis 0
flex-group 1
联合使用的效果:

flex是flex-grow flex- shrink? || flex-basis
默认值是0 1 auto
none: 0 0 auto

Flex布局：Flex布局

传统布局：
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值设大点即可。

display flex 怎么换行

1、首先我们打开微信开发者工具。
2、然后在项目文件目录中打开wxml文件。
3、在wxml文件中新建5个view标签。
4、接着我们打开wxss样式文件。
5、最后发现通过flex-wrap方法来实现换行。