精华内容
下载资源
问答
  • 最近uni-app开发出现一个页面效果:多行三列左右对齐,超出换行左对齐,网上查了很多都没有能有效解决这个问题,而且这个在手机app上属于比较特殊的情况,UI效果: 我这里就讲自己如何解决这个问题: 首先一个问题...

    最近uni-app开发出现一个页面效果:多行三列左右对齐,超出换行左对齐,网上查了很多都没有能有效解决这个问题,而且这个在手机app上属于比较特殊的情况,UI效果:
    在这里插入图片描述
    我这里就讲自己如何解决这个问题:
    首先一个问题考虑到最后一行不满的情况,如果使用左右两端对齐,很明显最后一行,如果是两列呢?例如这个:

    在这里插入图片描述
    此时,就不满足左对齐了!

    这个情况是会遇到的。比如,我们用v-for循环渲染内容,后台随机增加标签内容,就无法避免出现上面两端对齐的问题了!

    所以考虑到特殊情况作了如下改动,上代码

    <view class="itemBox">
    	<view class="item">
    		仪表仪器
    	</view>
    	<view class="item">
    		仪表仪器
    	</view>
    	<view class="item">
    		仪表仪器
    	</view>
    	<view class="item">
    		仪表仪器
    	</view>
    	<view class="item">
    		仪表仪器
    	</view>
    	<view class="item">
    		仪表仪器
    	</view>
    </view>
    
    .itemBox {
    	width: auto;
    	display: flex;
    	/* 两端对齐 */
    	justify-content: space-between;
    	flex-wrap: wrap;
    
    	.item {
    		width: 32.5%;
    		height: 60rpx;
    		text-align: center;
    		line-height: 60rpx;
    		background-color: #F2F2F2;
    		font-size: 32rpx;
    		font-family: PingFang SC;
    		font-weight: 400;
    		margin-top: 20rpx;
    	}
    	
    	/* 如果最后一行是3个元素 */
    	.item:last-child:nth-child(3n - 1) {
    	    margin-right: calc(32.5% + 3% / 3);
    	}
    	/* 如果最后一行是2个元素 */
    	.item:last-child:nth-child(3n - 2) {
    	    margin-right: calc(65% + 6% / 3);
    	}
    }
    

    最后效果:
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    很完美的解决了最后一行不满一列、两列不是左对齐的情况!

    展开全文
  • 样式,这样大盒子里每个小视图块就均分了,但是换行后假如每行只能排4个,如果下一行不够4个,被两端对齐。 给出我的做法: 1、基本思路是外层容器flex布局,让内部的每个小容器从左向右按顺序排列(justify-...

    今天有人问到下面这样一个问题

    他想要的效果:
    在这里插入图片描述
    而他做出来的效果是:
    在这里插入图片描述
    他这个是flex布局,完了外层的盒子给了个 justify-content: space-between; 样式,这样大盒子里每个小视图块就均分了,但是换行后假如每行只能排4个,如果下一行不够4个,被两端对齐。

    给出我的做法:

    1、基本思路是外层容器flex布局,让内部的每个小容器从左向右按顺序排列(justify-content: flex-start;),并且允许换行(flex-start;flex-wrap: wrap;);

    2、内层容器为了占满每一行,每个小容器用宽度用 calc()计算宽度。

    例如每行布局4个,宽度写法:width: calc((100% - 36px) / 4);

    取外层宽度100%-内层4个小容器的中间3个间距,我这里每个是12px,剩下的宽度就是每行分布的所有容器占据的总宽度,除以4就是每个宽度。

    3、最后加个 :nth-of-type(4n+0){margin-right: 0;} ,作用是让每间隔4个内部小容器中最后一个的右间距为0,避免占用父容器的宽度。

    css部分:

    .content {width: 800px;margin: 50px auto;}
    /*重点是下面几行样式*/
    .outer-box {display: flex;justify-content: flex-start;flex-wrap: wrap;}
    .outer-box .inner-item {
      width: calc((100% - 36px) / 4);
      height: 120px;
      margin-right: 12px;
      margin-bottom: 14px;
      background: #66d9b5;
    }
    .outer-box .inner-item:nth-of-type(4n+0){margin-right: 0;}
    
    

    html部分:

    <div class="content">
        <div class="outer-box">
            <div class="inner-item">
                <div>我是内容</div>
            </div>
            <div class="inner-item">
                <div>我是内容</div>
            </div>
            <div class="inner-item">
                <div>我是内容</div>
            </div>
            <div class="inner-item">
                <div>我是内容</div>
            </div>
            <div class="inner-item">
                <div>我是内容</div>
            </div>
            <div class="inner-item">
                <div>我是内容</div>
            </div>
        </div>
    </div>
    

    最终效果:
    在这里插入图片描述

    展开全文
  • flex布局自动换行对齐

    千次阅读 2020-06-04 10:47:52
    //两端对齐 //重要 解决最后一行两端对齐的问题 &::after{ content: ''; width: 226rpx; } .one{ background-color: #F6FAFE; padding: 33rpx 26rpx; width: 226rpx; ...

    HTML代码

    			<view class="con">
    				<view class="one">
    					<view class="">237</view>
    					<view class="">浏览次数</view>
    				</view>
    				<view class="one">
    					<view class="">237</view>
    					<view class="">浏览次数</view>
    				</view>
    				<view class="one">
    					<view class="">237</view>
    					<view class="">浏览次数</view>
    				</view>
    				<view class="one">
    					<view class="">237</view>
    					<view class="">浏览次数</view>
    				</view>
    				<view class="one">
    					<view class="">237</view>
    					<view class="">浏览次数</view>
    				</view>
    			</view>

    css代码

    			.con{
    				padding-bottom: 30rpx;
    				display: flex;
    				flex-wrap: wrap;//自动换行
    				justify-content: space-between;//两端对齐
                    //重要 解决最后一行两端对齐的问题
    				&::after{
    					content: '';
    					width: 226rpx;
    				}
    				.one{
    					background-color: #F6FAFE;
    					padding: 33rpx 26rpx;
    					width: 226rpx;
    					margin-top: 12rpx;
    					view{
    						&:first-child{
    							font-size: 32rpx;
    							color: #313249;
    							font-weight: bold;
    							line-height: 45rpx;
    						}
    						&:last-child{
    							font-size: 26rpx;
    							color: #878794;
    							line-height: 37rpx;
    						}
    					}
    				}
    			}

     

    展开全文
  • display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch;
  • flex布局,均分可换行左对齐

    千次阅读 2020-08-06 12:30:50
    flex-wrap: wrap; justify-content: space-between; } .item { flex: 0 0 30%; height: 30px; margin-bottom: 10px; } .item.hidden { height: 0px; box-sizing: border-box; margin: 0 !important; ...
  • flex换行并且中间间距相同 //父元素设置 display:flex;//表示显示一行 flex-direction:row;//水平的方向 //flex-wrap:nowrap//不换行 justify-content:space-between//两端对齐,项目之间又间距
  • 需求: 每一行三个元素,剩下的元素自动换行,而且左对齐[如图] 实现:
  • HTML=CSS 4.22Flex换行

    2021-04-22 15:54:26
    main axis:水平的主轴 cross axis:垂直交叉抽 main sart:主轴的开始位置 ...flex-direction:row/rpw-reverse:改变主轴 row:默认值,从到右 row-reverse:从右到 column:从上往下 column-reverse:
  • flex平均分布换行后自动对齐

    千次阅读 2021-03-16 11:30:19
    如何可以使用flex布局 进行平均分布,又可以换行呢? 我最开始是这样做的: display: flex; display: -webkit-flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap; 效果: 如果我...
  • 很多项目布局都会用到多个盒子平均分布并换行,虽然有很多的方法,今天我们在这里用一下flex布局来实现一下,实现效果如下图: <template> <div class="analysisTask"> <ul class="chartList">...
  • 弹性布局多列换行居左布局,flex布局下两端对齐,不满左对齐 问题情境: 在flex布局下,多行排列,如何让flex布局最后一行没有排满时,向左对齐排列且与上面的行间距相同。 实现效果: <!DOCTYPE html> <...
  •   在做一些类似商城的项目中,我们会时常遇到类似 五个模块中三个模块占一行,另外外两个换到下一行靠左对齐这样的情况。下面我通过案例来实现以下这个效果: 效果图: 案例如下: <template> <div ...
  • 给父容器after或者before(适用于每行3或者4列) .box:after { display:block; content:""; width: 32%; height:0px; } 本人亲测有效,希望能帮助到需要的小伙伴,加油!
  • 使用flex布局(多行,一行三个),换行后最后一行左右对齐问题 <html> <head> <style> html, body, ul { margin: 0; padding: 0; } ul { width: 100%; display: flex; flex-wrap: ...
  • Grid布局天然有gap间隙,且天然格子对齐排布,因此,实现最后一行左对齐可以认为是天生的效果。 <div class="box"> <div class="list"></div> <div class="list"></div> <div ...
  • flex 最后一行左对齐

    万次阅读 2017-05-12 21:18:51
    最近项目布局上要求item两端对齐,而且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between;实现时发现最后一行不能左对齐,而是两端对齐方式,下图不是项目上想要的效果(不使用flex也...
  • flex label 换行

    2019-08-02 12:22:16
    Flex中label换行有两种情况 在AS中赋值: label.text="Online\r\nResources" 在mxml中赋值: text="Online&#13;Resources" 在flash builder中就可以换行显示了。左右有四种对齐方式,上下四种对齐方式。 ...
  • 默认情况下,所有的直接子元素都被认为是 flex 项,并从到右依次排列在一行中。如果 flex 项的宽度总和大于容器,那么 flex 项将按比例缩小,直到它们适应 flex 容器宽度 演示: 找一个页面敲击f12,找到div内多个...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,690
精华内容 4,276
关键字:

flex换行左对齐