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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
Feb 04 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
支持IE8的纯css3开发的响应式设计动画菜单教程
Nov 05 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
基于ccs3的timeline时间线实现方法
Apr 30 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
HTML5实现音频和视频嵌入的方法
Aug 22 HTML / CSS
详解Html5项目适配系统深色模式方案总结
Apr 14 HTML / CSS
CSS实现五种常用的2D转换
Dec 06 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
PHP 错误之引号中使用变量
2009/05/04 PHP
php制作动态随机验证码
2015/02/12 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
php封装的smartyBC类完整实例
2016/10/19 PHP
载入进度条 效果
2006/07/08 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
Vue自定义指令使用方法详解
2017/08/21 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
python模糊图片过滤的方法
2018/12/14 Python
python最小生成树kruskal与prim算法详解
2019/01/17 Python
使用 tf.nn.dynamic_rnn 展开时间维度方式
2020/01/21 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
Python爬虫教程知识点总结
2020/10/19 Python
介绍一下write命令
2012/09/24 面试题
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
师范学院毕业生求职信范文
2013/12/26 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
求职信结尾怎么写
2014/05/26 职场文书
社区灵活就业证明
2014/11/03 职场文书
春节慰问信范文
2015/02/15 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL