flex布局左边自适应,右边宽度固定

已于 2023-06-08 16:59:50 修改
阅读量1.2w 收藏 4
点赞数
分类专栏： 经验分享 文章标签： 前端 vue.js
于 2020-06-04 14:32:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leng0920/article/details/106546054
版权 
wxml:
<view class="content">
 <view class="left-content">左边自适应</view>
 <view class="right-content">右边固定</view>
</view>

wxss
.content{
display:flex;
align-items:center ;
just-content:space-between;
}
.left-content{
min-width:0;
flex:1;
}
.right-content{
 width:200rpx;
}

性野喜悲
关注
专栏目录
详解左右宽度固定中间自适应html布局解决方案
09-22
在网页设计中，经常遇到一种布局需求：左右两侧的元素宽度固定，而中间的元素则根据屏幕大小自适应调整宽度。这种布局方式能够灵活适应不同设备和屏幕尺寸，提升用户体验。本文将详细介绍五种实现这种布局的方法。 ...
flex布局实现左右都不定宽的自适应布局
Archimelan的博客
11-03 8721
第一个应用：固定宽度+自适应布局， 需求如下：左边图片定宽，图示选中区域为自适应布局 实现：这个比较简单，父元素设置display: flex; 右边子元素设置：flex-grow: 1，这样子右边会自动撑开空白的地方。 第二个应用：完全显示的文本+超出省略的文本（两边都不定宽）： 需求如下：邀请时间完全显示，昵称超出后省略 实现：父容器设
两栏布局之右边固定左边自适应
qq_41801117的博客
03-24 1931
两栏布局是咱们在项目中经常遇到的一种布局方式，在这里记录一下两栏布局之右边固定，左边自适应的布局方式。 首先给定2个div盒子。 <div id="app"> <div class="left"></div> <div class="right"></div> </div> 1、flex布局，我比较喜欢采用的一种，简单粗暴，但是flex可能存在兼容性问题，如果是手机端就可以放心使用。首先设置display: flex，让
请你学习：前端布局3 - flex
最新发布
一个搬砖工人
08-29 944
Flexbox布局也叫Flex布局，弹性盒子布局。它的目标是提供一个更有效地布局、对齐方式，并且能够使父元素在子元素的大小未知或动态变化情况下仍然能够分配好子元素之间的间隙。主要思想是使父元素能够调整子元素的宽度、高度、排列方式，从而更好的适应可用的布局空间。设定为flex布局的元素能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出。​Flex布局更适合小规模的布局，可以简便、完整、响应式的实现各种页面布局。但是，设为Flex布局以后，其。
右边宽度固定，左边自适应的三种方法
DurianPudding的博客
02-22 917
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;右边宽度固定，左边自适应&lt;/title&gt; &lt;style&gt; html, body { margin: 0;
CSS flex 左右两列布局 左侧列宽度自适应 右侧列宽度固定
crazybai0001的博客
12-12 2532
需要实现的效果如下： 右侧列内容宽度固定（110px），左侧列占满剩余宽度，左侧列宽度自适应。 改变浏览器宽度后，左侧列仍旧自适应，右侧列固定110px。 缩放浏览器百分比后，左侧列仍宽度仍旧自适应，右侧列宽度固定110px。 实现代码： 父容器设置flex横向布局，父容器中有两个子元素（左侧列、右侧列），左侧列的宽度使用calc动态计算【calc(100% - 11px)】，右侧列宽度固定为110px，这样就实现了本案例效果。 ...
设置display:flex时， flex布局时设置单个子元素靠右
看陌生的风景的博客
06-29 7658
<div class="operate-content"> <el-button type="primary" size="small" class="search_btn" :loading="search_loading" @click="search()" icon="el-icon-search" >添加</el-button> <div class="textR"..
flex布局左边宽度固定，右边宽度动态扩展问题
pscool的博客
03-15 6674
左边盒子和右边盒子在都没有设置高度的情况下，它们是等高的（因为默认-> align-items:stretch，它们的高度在flex容器没有设置高度的情况下，将由左边盒子和右边盒子最高的高度决定。但是如果在右边 盒子里面放一个宽度为600px，高度为200px的黄色盒子，显然宽度已经超出了右边盒子的宽度，如下所示，我们看到左边的宽度不再是固定的300px了！/* 重要的是这行代码，这样右边的盒子就不会超出父容器盒子的范围了 */再看一个案例，右边放的是代码，我们看到右边盒子又是超出了父元素的宽度。
CSS三栏布局探讨——中间固定宽度两边自适应宽度
09-25
本文将深入探讨一种特殊的三栏布局方式：中间固定宽度，两边自适应宽度。 首先，让我们回顾一下传统的三栏布局，也就是左右两栏固定宽度，中间一栏自适应宽度的布局。这种布局常用于网站的主体内容展示，左侧可能...
左定宽度右自适应宽度并且等高布局实现代码
09-25
1. 固定宽度与自适应宽度布局：文件中提到的“左侧固定宽度，右侧自适应屏幕宽度”的布局是一个常见的布局需求。实现这种布局通常有两种方法，第一种是使用浮动（float）来控制左侧元素固定宽度，并使用 margin-left...
flex布局实现左侧文字溢出省略右侧文字自适应
09-22
在网页布局设计中，有时我们需要实现一种效果，即左侧的文字能够根据内容自动调整宽度，并在空间不足时自动省略，而右侧的文字则需要保持自适应并全显，不会因为左侧文字过多而被挤压。这种效果通常可以利用CSS的...
2种方法实现经典的左侧固定宽度200px，右侧自适应宽度的布局
summer199605的博客
08-16 3529
首先我们假定页面上已有下列元素： <body > <div id="left" ></div> <div id="right"></div> </body> 第一种方法：float+margin-left 这种方法是最简单也是最容易想到的方法(至少在我看来)，请看如下CSS： div{ hei...
右边宽度固定，左边自适应
mangguom23的博客
01-19 148
1实现方式一:最简单的方式使用flex的方式实现 <style> body{ display: flex; } .left{ background-color: rebeccapurple; height: 200px; flex: 1; } .right{ background-color: red; height: 200px; width: 100px; } </style> <body> <di
flex布局 左边固定右边自适应宽度，上边固定下边自适应高度
qq_43039004的博客
12-09 9063
两块内容 <div class="box"> <div class="left"></div> <div class="right"></div> </div> 1、左边宽度固定，右边宽度自适应铺满 .box { display:flex; height:100%; width:100%; } .left { height:100%;
flex实现左边宽度自适应右边宽度固定
蓝冰凌的博客
12-25 6063
&lt;div id="flex"&gt; &lt;div id="left"&gt;我在左边，自适应布局&lt;/div&gt; &lt;div id="right"&gt;我在右边，定宽&lt;/div&gt; &lt;/div&gt; #flex{ display: flex; } #left{ flex:1 1 auto
css实现右侧固定宽度，左侧宽度自适应
ytlizhen1的专栏
05-22 1429
反过来也可以：左侧宽度固定，右侧自适应。不管是左是右，反正就是一边宽度固定，一边宽度自适应。 这种布局比较常见，博客园很多默认主题就是这种。一般情况下，这种布局中宽度固定的区域是侧边栏，而自适应的区域是主体内容区——相信把侧边栏搞成自适应的人很少吧？ 要实现这种布局，也算比较简单。我们先给出html结构： div id="wrap">   div id="sidebar" sty
css怎么实现右边固定，左边自适应
ZHOUshi19990605的博客
07-26 2524
冷门css面试题
flex 布局 左边盒子flex:1 右边盒子固定宽度被推出屏幕右侧
树上骑个猴的博客
03-21 2305
页面左右布局，左边盒子设置flex:1，左边盒子里的内容是el-table。 右边盒子设定固定宽度，当左边盒子里的el-table每次在页码1和页码2之间切换的时候(我的el-table一共是2页，第二页数据少不会出现垂直滚动条，第一页数据多会出现垂直滚动条)，el-table右侧滚动条的出现和消失导致左边el-table的宽度越来越大，所以左边盒子宽度越来越大。导致右边的盒子被推出屏幕右侧边界。 原因：如果左边盒子不设置宽度，左边盒子可以被子节点(el-table)无限撑开。 解决方案： 给左边盒子设置
flex布局 右边固定 左边自适应
07-20
要实现右边固定、左边自适应的布局，您可以使用 Flexbox 来实现。以下是一个简单的示例代码： ```html <!DOCTYPE html> .container { display: flex; } .left { flex-grow: 1; background-color: light...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值