用弹性布局做 tabbar，是什么影响你的弹性布局？

hjhcos

于 2022-01-13 22:03:59 发布

阅读量265

点赞数

分类专栏：前端文章标签： css3 css html

hjhcos

本文链接：https://blog.csdn.net/hjh_cos/article/details/122482219

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

tabbar

在这里插入图片描述

这种布局，可以利用双重浮动布局的方案进行排版。

第一层是对每个模块并行排列进行浮动
第二层是对每个模块内部的图标与文字进行对齐浮动
你完全不需要担心它的高度，它会自动适配根据内容区的大小（即padding包括的区域）。
但是你可能需要考虑行高对其布局的影响，你也可以通过控制第二层的宽度来限制它横向的占位。当然宽度不能直接使用width来定义，这样并不会使占位发生变化，应该使用max-width。如果你需要换行只需要增加两个参数就可以完成：flex-wrap min-width。

<body>
    <view class="flex flex-wrap" style="margin-bottom: 12px;">
        
        <view class="flex flex-col" style="background-color: transparen; margin-bottom: 20px;">
            
    		<svg t="1642080829945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2807" width="48" height="48"><path d="M544 552.32v247.68a32 32 0 0 1-32 32 31.36 31.36 0 0 1-32-32V552.32L256 423.04a32 32 0 0 1-11.52-43.52 31.36 31.36 0 0 1 43.52-11.52l224 128 222.08-128a31.36 31.36 0 0 1 43.52 11.52 32 32 0 0 1-11.52 43.52l-222.08 128z" fill="#333333" p-id="2808"></path><path d="M64 256v512l448 256 448-256V256L512 0z m832 480L512 960l-384-224v-448L512 64l384 224z" fill="#333333" p-id="2809"></path></svg>
			<view style="text-align: center; color: #666666;">商城</view>
		</view>
	</view>
	
	<style>
        .flex {
    		display: flex;
    		flex-direction: row;
    		flex: 1;
    		align-items: center;
    	}
    
    	.flex-wrap {
    		flex-wrap: wrap;
    	}
    
    	.flex-col {
    		flex-direction: column;
    	}
    </style>
</body>