css3 flex 布局宽度不生效

最新推荐文章于 2024-08-17 21:15:18 发布

_念_

最新推荐文章于 2024-08-17 21:15:18 发布

阅读量2.7k

点赞数 2

分类专栏： css 文章标签： css css3 html

本文链接：https://blog.csdn.net/nian_cj/article/details/105361486

版权

本文介绍了使用CSS3 Flex布局实现两列布局时遇到的问题，当左侧内容宽度超过其设定宽度时，会挤压右侧固定宽度的列。通过添加`overflow:hidden`可解决溢出问题，但会导致右侧列宽度变小。为保持右侧列至少200px宽度，可以设置`min-width:200px`，确保布局在各种情况下都能完美兼容。

摘要由CSDN通过智能技术生成

两列布局项目中经常会用到，很多种方法可以做这样的效果
在这里插入图片描述
但是最方便的还是要属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 宽度不生效