flex 布局解决最后一个布局问题
当我们使用flex布局，可以自动换行的时候，经常会出现最后一个布局，没有自动跟在最后一个。因为我们设置flex的content属性是space-between。 解决办法： 通过给父级添加after伪类法，解决最后一排数量不够两端分布的情况。 原理：after伪类是在最后的时候，添加一个对应的css，这种三等分的情况，最后一个宽度要设置33%。给一个高度，占位。
display flex 怎么换行
1、首先我们打开微信开发者工具。
2、然后在项目文件目录中打开wxml文件。
3、在wxml文件中新建5个view标签。
4、接着我们打开wxss样式文件。
5、最后发现通过flex-wrap方法来实现换行。
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: 《flex-direction》 || 《flex-wrap》 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: 《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 auto flex: none | 6.单独对齐方式：自动（默认） | 顶部对齐 | 底部对齐 | 居中对齐 | 文本基线对齐 | 上下对齐并铺满 align-self: auto | flex-start | flex-end | center | baseline | stretch
这写的很乱，我看着都乱凑合看吧！！！
DIV+CSS样式，li自动适应高度，自动换行，横向排列
HTML部分：
《div id="nav"》
《ul》
《li》AAAA《/li》
《li》BBBB《/li》
《li》CCCC《/li》
《li》DDDD《/li》
《li》EEEE《/li》
《li》FFFF《/li》
《/ul》
《/div》
css部分：
#nav{
margin: 0 auto;
border: 2px solid #00CED1;
}
ul,li {
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
li{
border: 1px solid;
width: 100px; /*每个元素的初始化宽度*/
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
flex:auto; /*这是关键*/
}
扩展资料：
Flex是Flexible Box的缩写，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
采用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
flex-wrap
flex-flow
justify-content
align-item
align-content
解决flex布局换行最后一行的元素无法靠左/上布局的简单方法
当我们使用flex布局并设置自动换行时，最后一行的元素不会按照我们的预期靠左布局，如： css: 结果： 结果： 可能会出现的问题：当子元素数量少无法占满父元素的宽度时，会出现以下问题：
用了flex布局，自动换行，三行三列但有10个li，多出一个想放在第一排最后并实现横向滚动，如何实现求代码
您好，茫茫人海之中，能为君排忧解难实属朕的荣幸，在下拙见，若有错误，还望见谅！。HTML部分：《div id="nav"》《ul》《li》AAAA《/li》《li》BBBB《/li》《li》CCCC《/li》《li》DDDD《/li》《li》EEEE《/li》《li》FFFF《/li》《/ul》《/div》css部分：#nav{margin: 0 auto;border: 2px solid #00CED1;}ul,li {非常感谢您的耐心观看，如有帮助请采纳，祝生活愉快！谢谢！
在开启弹性空间的容器中,怎么才能使容器的子元素换行显示
要使容器的子元素换行显示，首先要确保容器所指定的弹性空间属性设置为flex-wrap: wrap，它的设置默认值是 nowrap，默认情况下，容器中的所有元素都会在一行中显示，没有换行。此外，弹性容器中的子元素的flex-basis属性也需要设置为auto，以便容器根据容器的宽度调整元素的尺寸。当容器的宽度不够时，子元素将自动换行显示。另外，如果要控制子元素换行显示的具体位置，可以使用弹性容器的flex-flow属性，这个属性可以控制容器中子元素的布局方向，包括横向排列和纵向排列，以及将子元素从左到右排列还是从右到左排列。这些属性的设置将影响子元素的换行显示位置。
flex布局最后一列，文字撑满换行
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》
