作者：admin 发布时间：2024-02-10 23:00 分类：资讯 浏览：26 评论：0
猜测原因是因为条件布局中我使用的是flex导致（前边说了，前端只能说会，不敢说精通）。然后此时就想到了一个新的方案，就是新添加一个空白div，然后将空白div填满最后不就行了。
当我们使用flex布局，可以自动换行的时候，经常会出现最后一个布局，没有自动跟在最后一个。因为我们设置flex的content属性是space-between。解决办法：通过给父级添加after伪类法，解决最后一排数量不够两端分布的情况。
设置flex-direction属性决定主轴的方向。设置justify-content属性决定主轴上的子元素的对齐方式。设置align-items属性决定交叉轴上的子元素的对齐方式。设置flex-wrap属性决定是否换行。
flex-wrap 属性指定 flex 元素单行显示还是多行显示，该属性接受以下取值：nowrap： 元素都放在一行，也是默认属性值；wrap：元素放到多行；wrap-reverse： 和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
使用第二种方法，在外层加VBOX，设置VBox 的属性verticalGap=2（像素）具体设置的值由您的需求决定，这个属性是设置vbox中的行间距的。
flex-direction 决定主轴的方向，默认值是row即横向从左往右的顺序进行排列。
flexdirection：设置弹性项目的排列方向，可以是水平方向（row）、水平反方向（rowreverse）、垂直方向（column）、垂直反方向（columnreverse）。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex-direction： 定义项目的排列方向。可以是行方向（row）或列方向（column）。flex-wrap： 控制项目是否换行。可以选择不换行（nowrap）、自动换行（wrap）或跨越多行（wrap-reverse）。
1、通过verticle-align：middle实现CSS垂直居中。 通过vertical-align：middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。通过display：flex实现CSS垂直居中。
2、最外层父元素设置为弹性布局，子元素设置为 display：inline-block。子元素的第二级的div根据条件判断是否显示（display：none）。导致的问题：设置space-between.每一行的最后一个子元素距离最右边有一定的宽度。
3、所以会对flexbox的概念做一个简单的介绍，以为后面的实例做一个铺垫。本人一直认为，不管学习任何知识，对于概念的理解都十分重要。
4、特点是：可以设置长宽，默认宽度不占满父元素）。这时，即使故意设置display：inline； display：block都是无效的。但是float在IE6下的双边距bug就是用display：inline； 来解决的。position：relative不会隐式改变display的类型。
5、使用位移方法，兼容性较低，移动端慎用 组合使用display：table-cell和vertical-align、text-align，使父元素内的所有行内元素水平垂直居中（内部div设置display：inline-block即可）。
6、添加 float：left； 即可横向排列。添加 display： flex； 即可横向排列。当设置 display：flex时， float：left会失效。看你截图，li应该是已经实现横向排列了，只是宽度不够，导致字体竖向显示了。
使用步骤如下：设置容器的display属性为flex或inline-flex。设置flex-direction属性决定主轴的方向。设置justify-content属性决定主轴上的子元素的对齐方式。设置align-items属性决定交叉轴上的子元素的对齐方式。
由于微信小程序的布局系统是基于flex布局实现的。flex布局是CSS3引入的一种新的布局方式，它可以方便地进行元素的水平和垂直排列。然而，微信小程序的flex布局系统有一定的限制，它不支持使用float属性将元素靠左排列。
分割线居中如下：首先实现微信小程序居中，可以用flex布局工具。其次将alignitems改成justifycontent。
flex布局居中。小程序文字偏上是flex布局的问题导致，需要把flex布局居中即可。
view { display：flex ；align-items：center；} 但是也遇到了align-items：center无法居中的问题，想了很久终于找到了解决办法。
1、flex-direction：设置主轴的方向（即项目的排列方向）。内有四个值：row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。
2、Flex布局基于Flexbox API，该API提供了一组属性，用于定义容器和项目之间的布局关系。通过使用这些属性，您可以指定项目在容器中的对齐方式、方向、顺序和空间分配。
3、flex布局就是弹性布局。Flex是FlexibleBox的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性。布局的传统解决方案，基于盒状模型，依赖display属性＋position属性＋float属性。
1、flex-direction 决定主轴的方向，即项目排列的方向。有四个可能的值：row（默认） | row-reverse | column | column-reverse。flex-wrap 决定项目在盒中无法撑满的情况下，是否换行。
2、采用 Flex 布局的元素，称为Flex 容器 它的所有子元素自动成为容器成员，称为Flex项目 容器的属性 （重点记忆）以下6个属性设置在容器上。
3、采用flex布局的元素，称为flex容器（flex container）。它的所有子元素自动成为容器成员，称为flex项目（flex item）。
4、关于手机上的flex布局 Flex是FlexibleBox的缩写，意思是“灵活的布局”，用于为箱式模型提供最大的灵活性。任何容器都可以被指定为Flex布局。
5、Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。display： flex； display： inline-flex；注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。