废话不多说:直接上代码解决问题;
父级:
.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. feildconfig

    <template> <div style="float:left;width: 100%"> <el-row> <el-col :spa ...

  2. Linux信号量

    查看信号量 [root@localhost ~]# kill -l 1) SIGHUP 2) SIGINT 3) SIGQUIT 4) SIGILL 5) SIGTRAP 6) SIGABRT 7) ...

  3. Java面试知识点(二)super 和 this 关键字

    this this 是自身的一个对象,代表对象本身,可以理解为:指向对象本身的一个指针. this 的用法在 java 中大体可以分为 3 种: 普通的直接引用 这种就不用讲了,this 相当于是指向 ...

  4. GUI自动化测试策略

    标签(空格分隔): GUI自动化策略 带你看看实际的大型全球化电商网站的 GUI 自动化测试如何开展.这场实战,我将从以下两个方面展开 试策略如何设计?这一点,我会根据亲身经历的实际项目,和你探讨 G ...

  5. Linux Mint操作系统安装

    1,Linux 发行版 什么是Linux 发行版呢?这要从Linux 来源说起.Unix操作系统后期,开始收费和商业闭源了.一个叫Richard  Stallman 的人就发起 GNU 计划,想模仿U ...

  6. Nuxt框架中内置组件详解及使用指南(二)

    title: Nuxt框架中内置组件详解及使用指南(二) date: 2024/7/7 updated: 2024/7/7 author: cmdragon excerpt: 摘要:"本文详 ...

  7. Nunjucks

    Nunjucks是什么东东?其实它是一个模板引擎. 那什么是模板引擎? 模板引擎就是基于模板配合数据构造出字符串输出的一个组件.比如下面的函数就是一个模板引擎: function examResult ...

  8. CF580C

    说句实话,这道题作为蓝题过于简单了一点 #include<iostream> #include<utility> #include<vector> using na ...

  9. 物联网浏览器(IoTBrowser)-基于计算机视觉开发的应用“智慧眼AIEye”

    一.起因 最近毕业在家:),准备筹划社区运营和IoTBrowser升级的事务,遇到了一系列物业管理上的问题,本来出于好心提醒物业人员,结果反被误认为是打广告推销的,当时被激怒一下,后面一想也许这也是一 ...

  10. 解决方案 | 获取所有的打印输出的图纸尺寸的名称GetCanonicalMediaNames返回为空的原因竟然是官方帮助文件给我带来了误导-CAD VBA

    巨大的坑,该代码来自于acadauto_2014--AutoCAD2014 ActiveX Reference Guide.chm 但是存在一个巨大的bug. '获取所有的打印输出的图纸尺寸的名称 , ...