css3中flex布局宽度不生效的解决


Posted in HTML / CSS onDecember 09, 2020

两列布局项目中经常会用到,很多种方法可以做这样的效果

css3中flex布局宽度不生效的解决

但是最方便的还是要属flex了,给外层父元素设置display:flex;然后子元素,宽度自适应的那个设置
flex-grow:1;,另外一个设置固定宽度就可以做到,一个固定另一个自适应了。

具体代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex 宽度不生效</title>
</head>
<body>
  <style>
    /* 重置样式 */
    * {
      margin: 0px;
      padding: 0px;
    }
    /* 设置外层display为flex */
    .box {
      display: flex;
      height: 100px;
      width: 100%;
    }
    /* 左边自适应 */
    .box .left {
      flex-grow: 1;
      background: red;
    }
    /* 右边固定 */
    .box .right {
      width: 200px;
      background: yellow;
    }
  </style>
  <!-- 外层盒子 -->
  <div class="box">
    <!-- 左侧 -->
    <div class="left"></div>
    <!-- 右侧 -->
    <div class="right"></div>
  </div>
</body>
</html>

这段代码的运行结果就是上面截图那样,但是这个代码有一个小小的bug,那就是当我们左边(自适应那边)内部如果有内容,并且内容的宽度超过了left的宽度的时候,就会把右边(固定宽度)挤小,你会发现你给的固定宽度(例子中的200px)不生效了,或者出现滚动条。
我们在左边加一点内容,并且让他超出宽度。

/* 超出的内容 样式 */
    .box .left .content {
      width: 1000px;
    }
<!-- 左侧 -->
    <div class="left">
      <!-- 超出的内容 -->
      <div class="content"></div>
    </div>

运行结果:

css3中flex布局宽度不生效的解决

内容超出,并出现了滚动条。这个问题很好解决,只需要在left上面加上溢出隐藏的属性,就可以了。

/* 左边自适应 */
    .box .left {
      flex-grow: 1;
      background: red;
      overflow: hidden;
    }

css3中flex布局宽度不生效的解决

但是问题又来了,右边出来了,可是它的宽度变小了,不足200了。
这个问题呢,其实也很容易,给右边的div(right)加上min-width:200px;就完美了。

/* 右边固定 */
    .box .right {
      width: 200px;
      min-width: 200px;
      background: yellow;
    }

css3中flex布局宽度不生效的解决

这样不管你,什么屏幕,或者怎么拖放都能完美兼容了。。。

到此这篇关于css3中flex布局宽度不生效的解决的文章就介绍到这了,更多相关flex布局宽度不生效内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS Grid布局教程之什么是网格布局
Dec 30 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
html+css3实现的登录界面
Dec 09 #HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 #HTML / CSS
CSS3 实现的火焰动画
Dec 07 #HTML / CSS
CSS3 实现的加载动画
Dec 07 #HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 #HTML / CSS
详解CSS3+JS完美实现放大镜模式
Dec 03 #HTML / CSS
css3中仿放大镜效果的几种方式原理解析
Dec 03 #HTML / CSS
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
Yii框架登录流程分析
2014/12/03 PHP
浅谈php处理后端&amp;接口访问超时的解决方法
2016/10/29 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
js格式化时间小结
2014/11/03 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
Python制作词云的方法
2018/01/03 Python
Django之无名分组和有名分组的实现
2019/04/16 Python
python多线程分块读取文件
2019/08/29 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python二维图制作的实例代码
2020/12/03 Python
python实现简单文件读写函数
2021/02/25 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
住房公积金接收函
2014/01/09 职场文书
初一英语教学反思
2014/01/11 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
清明节演讲稿
2014/05/27 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
使用JS实现简易计算器
2021/06/14 Javascript