flex布局左边宽度固定,右边宽度动态扩展问题

我们希望在一个固定宽度的容器中,分左右两边,左边宽度固定大小,右边占满,使用flex布局时,如下:
在这里插入图片描述
对应代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {
        	/* 最外面的容器宽度为800px */
            width: 800px;
            
            background-color: #ddd;
            border: 1px solid black;

			/* 使用flex布局 */
            display: flex;
        }
        .container .left-box {
	
			/* 左边固定宽度为300px */
            width: 300px;
            
            background-color: #bfa;

            /* 为了能够看到效果,设置最小高度为100px */
            min-height: 100px;
        }
        .container .right-box {
        
        	/* 右边宽度动态扩展,这将会占满所有剩余空间 */
            flex-grow: 1;
            
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">
           
        </div>
    </div>
</body>
</html>

左边盒子和右边盒子在都没有设置高度的情况下,它们是等高的(因为默认-> align-items:stretch,它们的高度在flex容器没有设置高度的情况下,将由左边盒子和右边盒子最高的高度决定。如果flex容器设置了高度,则高度与flex容器的高度保持一致)。如果左边盒子和右边盒子设置了高度,那么就是指定的高度。

这看上去并没有什么太大的问题,并且也实现了布局效果。

但是如果在右边 盒子里面放一个宽度为600px,高度为200px的黄色盒子,显然宽度已经超出了右边盒子的宽度,如下所示,我们看到左边的宽度不再是固定的300px了!是因为左边的默认flex-shrink:1,它的宽度会收缩。
在这里插入图片描述
对应代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {
            width: 800px;

            background-color: #ddd;
            border: 1px solid black;

            display: flex;
        }
        .container .left-box {
            width: 300px;

            background-color: #bfa;

        }
        .container .right-box {
            
            flex-grow: 1;

            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">
            <!-- 添加一个宽度为600px,高度为200px盒子 -->
            <div style="width:600px;height:200px;background-color: yellow;"></div>
        </div>
    </div>
</body>
</html>

我们可以给左边盒子添加flex-shrink:0,它把右边挤出去了,超出了父元素的宽度了。
在这里插入图片描述
我们可以给右边盒子添加添加over:hidden或overflow:auto处理,会有如下效果,这样就不会超出父容器的宽度了
在这里插入图片描述

再看一个案例,右边放的是代码,我们看到右边盒子又是超出了父元素的宽度
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {

            width: 800px;

            background-color: #ddd;
            border: 1px solid black;

            display: flex;
        }
        .container .left-box {

            width: 300px;

            flex-shrink: 0;

            background-color: #bfa;
        }
        .container .right-box {

            flex-grow: 1;
            
            background-color: pink;
        }
        pre {
            background-color: #282c34;
            color: #fff;
        }
        code {
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">
            <pre>
                <code>
@Override
public List listCategoriesBySearch(ConditionVO condition) {
    // 搜索分类
    List categoryList = categoryDao.selectList(new LambdaQueryWrapper()
            .like(StringUtils.isNotBlank(condition.getKeywords()), Category::getCategoryName, condition.getKeywords())
            .orderByDesc(Category::getId));
    return BeanCopyUtils.copyList(categoryList, CategoryOptionDTO.class);
}
                </code>
            </pre>
            123
            <pre>
            <code>
@Autowired
private CategoryDao categoryDao;
@Autowired
private ArticleDao articleDao;
                </code>
            </pre>
        </div>
    </div>
</body>
</html>

同样的给右边盒子添加overflow:hidden,超出部分被隐藏了,如下图:
在这里插入图片描述
我们可以给里面的pre标签添加overflow-x:auto,如下
在这里插入图片描述
代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {

            width: 800px;

            background-color: #ddd;
            border: 1px solid black;

            display: flex;
        }
        .container .left-box {

            width: 300px;

            flex-shrink: 0;

            background-color: #bfa;
        }
        .container .right-box {

            flex-grow: 1;
            overflow: hidden; /* 重要的是这行代码,这样右边的盒子就不会超出父容器盒子的范围了 */
            
            background-color: pink;
        }
        pre {
            background-color: #282c34;
            color: #fff;

            overflow-x: auto; /* 添加水平方向自动滚动条 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">
            <pre>
                <code>
@Override
public List listCategoriesBySearch(ConditionVO condition) {
    // 搜索分类
    List categoryList = categoryDao.selectList(new LambdaQueryWrapper()
            .like(StringUtils.isNotBlank(condition.getKeywords()), Category::getCategoryName, condition.getKeywords())
            .orderByDesc(Category::getId));
    return BeanCopyUtils.copyList(categoryList, CategoryOptionDTO.class);
}
                </code>
            </pre>
            123
            <pre>
            <code>
@Autowired
private CategoryDao categoryDao;
@Autowired
private ArticleDao articleDao;
                </code>
            </pre>
        </div>
    </div>
</body>
</html>

还有一种情况是,右边的内容是文字,但是文字超出宽度,需要显示省略号
参考:css列表示例&flex布局子元素超出父容器宽度问题
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {

            width: 800px;

            background-color: #ddd;
            border: 1px solid black;

            display: flex;
        }
        .container .left-box {

            width: 300px;
            min-height: 100px;

            flex-shrink: 0;

            background-color: #bfa;
        }
        .container .right-box {

            flex-grow: 1;
            overflow: hidden;
            
            background-color: pink;
        }
        .title1 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .title2 {

            display: block; /* 必须设置为block,下面的设置才会生效 */

            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .title3 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .title4 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .title5 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">

            <h2 class="title1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.</h2>
            
            <br/>
            
            <span class="title2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.</span>
            
            <br/>

            <div class="title3">
                <span >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.</span>
            </div>

            <br/>

            <div class="title4"> <!-- 省略样式写在这里没有用, 要写在下面这个div才有用 -->
                <div>
                    <span >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.</span>
                </div>
            </div>

            <br/>

            <div class="title5">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.
            </div>
        </div>
    </div>
</body>
</html>

再看一个示例
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('//at.alicdn.com/t/c/font_3916097_p205l52oy7.css');
        body {
            margin: 0;
            padding: 0;
        }
        
        .wrapper {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            width: 260px;
            background-color: rgb(236, 255, 231);
        }
        
        .title-wrapper {

            flex-grow: 1;
            overflow: hidden; /* 重要的是这行代码, 即使flex-grow:1, 也不会在内容过长时而超出范围 */
            

            cursor: pointer;
        }

        .title {
            text-overflow: ellipsis;
            white-space: nowrap; /* white-space属性为nowrap时,不会因为超出容器宽度而发生换行 */
            overflow: hidden;
        }
        .num {
            flex-shrink: 0;
            margin-left: 15px;
            user-select: none;
        }
    </style>
</head>
<body>
    
    <div class="wrapper">

            <div class="title-wrapper">
                <div class="title">
                    <i class="iconfont icon-dongtai"></i>
                    <span>我的风车我的风车我的风车我的风车我的风车我的风车</span>
                </div>
            </div>
            <span class="num">
                1000000篇
            </span>
    </div>
   
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/672.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode - 198 打家劫舍

目录 题目来源 题目描述 示例 提示 题目解析 算法源码 题目来源 198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 题目描述 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装…

【华为机试真题 Python实现】2023年1、2月高频机试题

文章目录2023年1季度最新机试题机考注意事项1. 建议提前刷题2. 关于考试设备3. 关于语言环境3.1. 编译器信息3.2. ACM 模式使用sys使用input&#xff08;推荐&#xff09;3. 关于题目分值及得分计算方式4. 关于做题流程5. 关于作弊2023年1季度最新机试题 两个专栏现在有200博文…

2023还有人不知道kubernetes?| 初步理解kubernetes

文章目录Kubernetes(K8s)一、Openstack&VM1、**认识虚拟化****1.1**、什么是虚拟化**1.2、虚拟化分类**2、OpenStack与KVM、VMWare2.1、OpenStack2.2、KVM2.3、VMWare二、容器&编排技术1、容器发展史1.1、Chroot1.2、FreeBSD Jails1.3、Solaris Zones1.4、LXC1.5、Dock…

深度学习 Day26——使用Pytorch实现猴痘病识别

深度学习 Day26——使用Pytorch实现猴痘病识别 文章目录深度学习 Day26——使用Pytorch实现猴痘病识别一、前言二、我的环境三、前期工作1、设置GPU导入依赖项2、导入猴痘病数据集3、划分数据集四、构建CNN网络五、训练模型1、设置超参数2、编写训练函数3、编写测试函数4、正式…

【LeetCode】1544. 整理字符串、LCP 44. 开幕式焰火

作者&#xff1a;小卢 专栏&#xff1a;《Leetcode》 喜欢的话&#xff1a;世间因为少年的挺身而出&#xff0c;而更加瑰丽。 ——《人民日报》 目录 1544. 整理字符串 LCP 44. 开幕式焰火 1544. 整理字符串 1544. 整理字符串 题目描述…

金三银四、金九银十 面试宝典 Spring、MyBatis、SpringMVC面试题 超级无敌全的面试题汇总(超万字的面试题,让你的SSM框架无可挑剔)

Spring、MyBatis、SpringMVC 框架 - 面试宝典 又到了 金三银四、金九银十 的时候了&#xff0c;是时候收藏一波面试题了&#xff0c;面试题可以不学&#xff0c;但不能没有&#xff01;&#x1f941;&#x1f941;&#x1f941; 一个合格的 计算机打工人 &#xff0c;收藏夹里…

正则表达式高阶技巧之匹配模式(使用python实现)

匹配模式介绍不区分大小写模式模式的指定方式应用单行模式多行模式注释模式其它模式修饰符的作用范围介绍 我们在正则中所说得匹配模式&#xff08;match mode&#xff09;&#xff0c;指的是匹配时使用的规则。设置特定的匹配模式&#xff0c;可能会改变对正则表达式的识别&a…

业内人士真心话,软件测试是没有前途的,我慌了......

我在测试行业爬模滚打7年&#xff0c;从点点点的功能测试到现在成为高级测试&#xff0c;工资也翻了几倍。个人觉得&#xff0c;测试的前景并不差&#xff0c;只要自己肯努力。 我刚出来的时候是在鹅厂做外包的功能测试&#xff0c;天天点点点&#xff0c;很悠闲&#xff0c;点…

Spark SQL支持DataFrame操作的数据源

DataFrame提供统一接口加载和保存数据源中的数据&#xff0c;包括&#xff1a;结构化数据、Parquet文件、JSON文件、Hive表&#xff0c;以及通过JDBC连接外部数据源。一个DataFrame可以作为普通的RDD操作&#xff0c;也可以通过&#xff08;registerTempTable&#xff09;注册成…

嵌入式安防监控项目——实现真实数据的上传

目录 一、相关驱动开发 二、A9主框架 三、脚本及数据上传实验 https://www.yuque.com/uh1h8r/dqrma0/tx0fq08mw1ar1sor?singleDoc# 《常见问题》 上个笔记的相关问题 一、相关驱动开发 /* mpu6050六轴传感器 */ i2c138B0000 { /* #address-cells <1>…

web实现太极八卦图、旋转动画、定位、角度、坐标、html、css、JavaScript、animation

文章目录前言1、html部分2、css部分3、JavaScript部分4、微信小程序演示前言 哈哈 1、html部分 <div class"great_ultimate_eight_diagrams_box"><div class"eight_diagrams_box"><div class"eight_diagrams"><div class&…

SpringBoot-实用开发篇

SpringBoot开发实用篇开发实用篇中因为牵扯到SpringBoot整合各种各样的技术&#xff0c;所以在整合每一个技术之前&#xff0c;都会做一个快速的普及&#xff0c;这样的话内容整个开发实用篇所包含的内容就会比较多。在学习的时候&#xff0c;如果对某一个技术不是很清楚&#…

硬刚ChatGPT!文心一言能否为百度止颓?中国版ChatGPT“狂飙”的机会在哪儿?

文章目录目录产品背景发展历程科技简介主要功能合作伙伴结语文心一言 &#xff08;英文名&#xff1a;ERNIE Bot&#xff09; *是百度基于文心大模型技术推出的生成式对话产品&#xff0c;被外界誉为“中国版ChatGPT”&#xff0c;将于2023年3月份面向公众开放。 [40] 百度在人…

python自动化办公(二)

上接python自动化办公&#xff08;一&#xff09; 文章目录文件和目录操作使用shutil库文件查找globfnmatchhashlib文件和目录操作 使用shutil库 shutil库也是Python标准库&#xff0c;它可以处理文件、文件夹、压缩包&#xff0c;能实现文件复制、移动、压缩、解压缩等功能。…

Vue基础23之路由第二节

Vue基础23路由路由的query参数src/router/index.jsDetail.vueHomeMessage.vue路由的query参数命名路由src/router/index.jsHomeMessage.vueApp.vue总结路由的params参数src/router/index.jsHomeMessage.vueDetail.vue总结路由 路由的query参数 src/router/index.js //该文件专…

Gehpi的网络布局

Gehpi的网络布局1. 力引导布局2. 辅助布局布局是网络可视化中的重要概念&#xff0c;指将点和边通过某种策略进行排布&#xff0c;应尽可能满足以下4个原则&#xff1a; 节点均匀分布在有限的区域内避免边的交叉和弯曲保持边的长度一致整体布局能反映图内在的特性 Gephi的布局…

卷积神经网络

目录卷积神经网络概述神经网络原理卷积神经网络卷积层怎么控制输出数据&#xff1f;如何抓取特征池化层归一化层全连接层局部感受野权值共享多卷积核池化子采样多卷积层卷积神经网络的训练前向传播BackForward反向传播权值更新过程中的卷积网络结构层的排列规律层的尺寸设置规律…

web3:区块链共识机制系列-POS(Proof of Stake)股权证明算法

web3相关学习一并收录至该博客&#xff1a;web3学习博客目录大全 前情衔接&#xff1a;web3:区块链常见的几大共识机制及优缺点 目录前言算法公式与原理算法公式运作原理以Peer Coin为例缺陷优点缺点特点分类发展历程casper协议1.什么是无成本利益关系问题2.引入casper协议解决…

SpringBoot 动态操作定时任务(启动、停止、修改执行周期)增强版

前段时间编写了一篇博客SpringBoot 动态操作定时任务&#xff08;启动、停止、修改执行周期&#xff0c;该篇博客还是帮助了很多同学。 但是该篇博客中的方法有些不足的地方&#xff1a; 只能通过前端控制器controller手动注册任务。【具体的应该是我们提前配置好我们的任务&am…

selenium(4)-------自动化测试脚本(python)

webdriverAPI 一)定位元素的方式&#xff0c;必问 1.1)id来定位元素&#xff0c;前提是元素必须具有id属性&#xff0c;因为有的元素是没有id的 1.2)name&#xff0c;元素必须有name&#xff0c;并且必须全局唯一 1.3)tagname&#xff0c;元素是一定有的&#xff0c;但是必须全…
最新文章