废话不多说:直接上代码解决问题;
父级:
.parent {
display: flex;
flex-flow: row;
}
子级:
.left-child {
width:100px;
}
.right-child {
flex:1;
overflow:hidden;/width:0;
}
注解:当不给right-child设置宽度,那么其会被自己的子节点无限撑开

  

flex 左右布局-----在手机端,当左侧宽度固定,右侧宽度自适应时,右侧会超出浏览器窗口的问题解决方案的更多相关文章

  1. css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style

    css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...

  2. CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)

    1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...

  3. css布局------左右宽度固定,中间宽度自适应容器

    HTML /*适用方法1,方法2*/<body> <div class="container"> <div class="left" ...

  4. CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  5. 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?

    在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...

  6. css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  7. flex页面布局练习--知乎

    采用flexbox弹性容器 在手机端进行页面布局 样本地址: http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E9%9D%A2- ...

  8. CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  9. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  10. 前端一面/面试常考题1-页面布局:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。

    题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...

随机推荐

  1. 何时/如何使用 std::enable_shared_from_this<T>?

    要点回顾 继承自 std::enable_shared_from_this<T> 的类能够在其自身实例中通过 std::shared_from_this 方法创建一个指向自己的 std:: ...

  2. HDD成都站:HMS Core 6.0带来新可能,多元服务驱动产品价值提升

    9月10日,由华为开发者联盟主办的HDD(Huawei Developer Day)于成都举行.活动中,华为HMS Core各领域专家重点解读了HMS Core 6.0为开发者带来的多项全新能力,及生 ...

  3. [FLET] 01 可以拖动的方块

    from typing import List import flet from flet import ( Container, Draggable, DragTarget, Page, Row, ...

  4. AT_joisc2019_j 题解

    先考虑这个式子: \[\sum_{j=1}^{M} |C_{k_{j}} - C_{k_{j+1}}| \] 一定是在 \(C\) 有序时取到,具体证明很简单各位读者自己证明. 那么现在式子变成: \ ...

  5. 谈谈你对MVVM开发模式和MVT的理解?

    MVVM分为Model.View.ViewModel三者. Model 代表数据模型,数据和业务逻辑都在Model层中定义: View 代表UI视图,负责数据的展示: ViewModel 负责监听 M ...

  6. yb课堂之单机和分布式应用的登陆校验解决方案 《七》

    单机tomcat应用登陆校验 session保存在浏览器和应用服务器会话之间 用户登陆成功,服务端会保存一个session,当然客户端有一个sessionId 客户端会把sessionId保存在coo ...

  7. 论文阅读: 面向Planning的端到端智驾Planning-oriented Autonomous Driving

    原文地址:https://arxiv.org/abs/2212.10156 背景 当代自动驾驶系统多采用序列化的模块化的任务处理方式,比如感知.预测.规划等.为了处理多样的任务.达到高水平智能,当代智 ...

  8. Java-Response对象设置响应消息

    功能:设置响应消息 1.设置响应行 格式:HTTP/1.1 200 OK 设置状态码:setStatus(int sc) 2.设置响应头:setHeader(String name,String va ...

  9. 判断浏览器是否是 IE 及 IE8 以下版本

    作为一个前端,避免不了会遇见IE的坑,其他浏览器都好好的,测到IE就完蛋,各种不支持,服气了 有些属性和方法是所有版本IE都不支持,而有些则是部分支持,在项目中能够,主要分界岭为IE8,我相信目前大部 ...

  10. 记一次 redis 事件注册不当导致的内存泄露

    线上的程序跑着跑着内存越来越大,并且没有下降的趋势,重启一下程序也只能短暂恢复.通过 htop 命令再按一下 M 键按内存占用大小排个序,程序会占好几个G.那好,让我们来分析一下. 收集dump 通过 ...