小程序flex布局之使用flex：1实现左浮动修效果

最新推荐文章于 2025-03-21 00:44:44 发布
最新推荐文章于 2025-03-21 00:44:44 发布
阅读量7.5k 收藏 4
点赞数
分类专栏： 小程序 文章标签： flex布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42662301/article/details/81611848
版权
本文介绍如何利用Flex布局实现左浮动效果。使用Flex布局时，传统float属性将失效。文中通过示例展示了WXML和WXSS代码的具体应用，帮助读者理解并实现期望的布局效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用flex：1实现左浮动修效果

前言

使用了flex布局后，是不能再使用float，无法实现左浮动效果。

如图

这里写图片描述

1、wxml代码
这里写图片描述
2、wxss代码
这里写图片描述

3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）
m0_73560798的博客
06-02 3375
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
微信小程序 flex:1表示什么
qq_26764331的博客
08-26 1408
flex是flex-grow,flex-shrink和flex-basis的简写。 除了auto（1 1 auto）和none(0 0 auto)这两个快捷值外，还有以下设置方式： 当flex取值为一个非负数字，则该数字为flex-frow值，flex-shrink取1，flex-basis取0%，如下是等同的： .item{flex:1;} .item{flex-grow:1; flex-shrink:1; flex-basis:0% } 当flex取...
CSS浮动布局和Flex布局
最新发布
2301_82023822的博客
03-21 877
标准流（Normal Flow）是浏览器默认的布局方式，元素按照 HTML 的书写顺序从上到下、从左到右排列，遵循。
浅谈浮动flex
lxn_zyl的博客
08-18 372
初学浮动总结
浅谈flex:1
TooManyDdficulty的博客
04-02 2566
flex布局中的flex：1三个属性的理解
flex:1详解
小天空的博客
08-31 370
CSS属性 flex 规定了弹性元素如何伸长或缩短以适应flex容器中的可用空间。这是一个简写属性，用来设置 flex-grow, flex-shrink 与 flex-basis。CSS flex-grow 属性定义弹性盒子项（flex item）的拉伸因子。MDN中是这么定义的。...
Flex布局在小程序的使用
03-29
所以为了在小程序开发中更方便地布局，有必要来详细了解下Flex布局在小程序的使用。本文将针对Flex布局的各个属性进行介绍，并直接使用wxss来编写例子，运行环境是小程序的开发者工具。 Flex布局的基本概念 Flex布局...
使用flex弹性布局代替传统浮动布局来为微信小程序写自适应页面 ...
03-29
我们知道，写习惯了前端的人，一般切图后布局...目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能，本人在微信小程序页面中尝试了一下弹性布局，个人感觉是：简直太好用了。 Flex 是 Flex
微信小程序布局新选择：Flex弹性布局
在微信小程序的页面设计中，使用flex布局能更好地适应不同屏幕尺寸，实现更灵活的布局。开发者无需再依赖`float`、`position`和`clear`属性，而是可以集中精力于内容的布局和响应式设计。flex布局为前端开发者提供了...
微信小程序 Flex布局-容器属性
weixin_45343878的博客
08-17 648
场景 容器与项目元素 主轴与交叉轴 容器属性 盒模型分类 盒模型分类：IE盒模型，标准盒模型，本质区别：宽高计算方式 场景 在小程序开发中，需要考虑各种尺寸终端设备上的适配。 在传统网页开发，用的是盒模型，通过display:inline | block | inline-block、 position、float来实现布局，缺乏灵活性且有些适配效果难以实现 比如下面常见的信息列表，要求内容高...
小程序Flex快速布局教程
MayanDev
12-20 1517
在做前端开发的过程中，页面设计与排版往往成为一大拦路虎。抛开色彩的搭配不说，最让人头疼的无非就是如何让元素在水平或者垂直方向上进行布局排列，并以一定的方式对齐，使得页面显得简洁有序。 在这几周小程序开发工作当中，我也碰到了这样的问题，主要是因为自己CSS功底不扎实，只对几个常用的属性较为熟悉，因此布局起来相当吃力。每次写页面，都要先找一大堆模板，最后堆叠出来的代码我自己都看得恶心。但渐渐的，发现别...
flex布局的flex为1到底是什么
weixin_63896561的博客
12-07 1119
今天写样式的时候，碰到这样一个问题：子盒子①和②的父盒子设置了display。子盒子①设置了固定宽度，如果子盒子②不想设置calc计算的话，可以设置子盒子②样式display为1。：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。设置②display：1后 ，②则沾满剩下所有空间。
flex弹性布局中的flex：1 到底是什么意思？
热门推荐
呆呆狗
01-30 1万+
flex弹性布局中的flex：1 到底是什么意思？ flex-basis flex-shrink flex-grow
flex设置成1和auto有什么区别
weixin_34270606的博客
04-25 5973
首先明确一点是，flex是flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况： flex的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则flex的默认值是 0 1 auto。同理，如下是等同的： .item {flex: 2333 3222 234px;} .item { flex-grow: 2333; ...
浮动与flex布局
ja_ck1873030的博客
05-15 993
如图：one盒子脱离了原来的标准流，所以一个盒子中的块元素都要设置float属性。标准流也叫文档流，指的是标签在页面中默认的排布规则，例如:块元素独占一行，行内。b.解释:伪元素添加的行内，要求块，要加display:block转头块元素。设置方式：给父元素设置display：flex，子元素可以自动挤压或拉伸。a.影响: 如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。1.操作:在父元素内容的最后添加一个块级元素，给添加的块级元素设。浮动的盒子会脱离标准流，不再占用标准流的位置。
flex布局，flex:1的计算
CJXBShowZhouyujuan的博客
02-26 6427
一、flex的属性梳理 注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。 （1）flex1的计算规则 第一步：先明确：flex 是 flex-grow | flex-shrink | flex-basis 的缩写。 1、默认情况：flex：0 1 auto; 2、flex取值为none 0 0 auto; 3、flex取值au...
06-CSS布局-浮动布局
冰霜的博客
08-31 568
1.CSS布局 - 什么是网页的布局方式? ​ 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 - 标准流(文档流/普通流)排版方式 ​ 标准流(文档流/普通流) ​ -标准流(文档流/普通流)处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都 处在标准流(文档流/普通流)中。 ​ -元素在标准流(文档流/普通流)中的特点 ​ 块元素 ​ 1.块元素在标准流(文档流/普通流)中会独占一行，块元
前端开发（浮动和Flex布局）
m0_73254888的博客
04-27 439
特点 产品区域布局 (应用) 效果一 效果二 CSS代码 消除浮动的效果 额外标签法 单伪元素法 布局侧轴 修改主轴方向 弹性伸缩比
标准流 浮动 flex布局
呼叫6945的博客
08-11 1280
浮动属性floatleft表示左浮动，right表示右浮动特点1.浮动后的盒子顶对齐2.浮动后的盒子具备行内块特点3.父级宽度不够，浮动的子级会换行4.浮动后的盒子脱标清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果1.双伪元素法拓展：浮动本质作用是实现图文混排效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值