flex布局左边宽度固定，右边宽度动态扩展问题

ps酷教程

已于 2023-07-05 21:31:12 修改

阅读量4.9k

点赞数

分类专栏：前端学习文章标签： css css3 html

于 2023-03-15 10:52:23 首次发布

本文链接：https://blog.csdn.net/qq_16992475/article/details/129545481

版权

前端学习专栏收录该内容

145 篇文章 6 订阅

订阅专栏

flex垂直方向布局与overflow结合使用

我们希望在一个固定宽度的容器中，分左右两边，左边宽度固定大小，右边占满，使用flex布局时，如下：
在这里插入图片描述
对应代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {
        	/* 最外面的容器宽度为800px */
            width: 800px;
            
            background-color: #ddd;
            border: 1px solid black;

			/* 使用flex布局 */
            display: flex;
        }
        .container .left-box {
	
			/* 左边固定宽度为300px */
            width: 300px;
            
            background-color: #bfa;

            /* 为了能够看到效果，设置最小高度为100px */
            min-height: 100px;
        }
        .container .right-box {
        
        	/* 右边宽度动态扩展，这将会占满所有剩余空间 */
            flex-grow: 1;
            
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">
           
        </div>
    </div>
</body>
</html>

左边盒子和右边盒子在都没有设置高度的情况下，它们是等高的（因为默认-> align-items:stretch，它们的高度在flex容器没有设置高度的情况下，将由左边盒子和右边盒子最高的高度决定。如果flex容器设置了高度，则高度与flex容器的高度保持一致）。如果左边盒子和右边盒子设置了高度，那么就是指定的高度。

这看上去并没有什么太大的问题，并且也实现了布局效果。

但是如果在右边盒子里面放一个宽度为600px，高度为200px的黄色盒子，显然宽度已经超出了右边盒子的宽度，如下所示，我们看到左边的宽度不再是固定的300px了！是因为左边的默认flex-shrink:1，它的宽度会收缩。
在这里插入图片描述
对应代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {
            width: 800px;

            background-color: #ddd;
            border: 1px solid black;

            display: flex;
        }
        .container .left-box {
            width: 300px;

            background-color: #bfa;

        }
        .container .right-box {
            
            flex-grow: 1;

            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">
            <!-- 添加一个宽度为600px，高度为200px盒子 -->
            <div style="width:600px;height:200px;background-color: yellow;"></div>
        </div>
    </div>
</body>
</html>

我们可以给左边盒子添加flex-shrink:0，它把右边挤出去了，超出了父元素的宽度了。
在这里插入图片描述
我们可以给右边盒子添加添加over:hidden或overflow:auto处理，会有如下效果，这样就不会超出父容器的宽度了

再看一个案例，右边放的是代码，我们看到右边盒子又是超出了父元素的宽度
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {

            width: 800px;

            background-color: #ddd;
            border: 1px solid black;

            display: flex;
        }
        .container .left-box {

            width: 300px;

            flex-shrink: 0;

            background-color: #bfa;
        }
        .container .right-box {

            flex-grow: 1;
            
            background-color: pink;
        }
        pre {
            background-color: #282c34;
            color: #fff;
        }
        code {
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">
            <pre>
                <code>
@Override
public List listCategoriesBySearch(ConditionVO condition) {
    // 搜索分类
    List categoryList = categoryDao.selectList(new LambdaQueryWrapper()
            .like(StringUtils.isNotBlank(condition.getKeywords()), Category::getCategoryName, condition.getKeywords())
            .orderByDesc(Category::getId));
    return BeanCopyUtils.copyList(categoryList, CategoryOptionDTO.class);
}
                </code>
            </pre>
            123
            <pre>
            <code>
@Autowired
private CategoryDao categoryDao;
@Autowired
private ArticleDao articleDao;
                </code>
            </pre>
        </div>
    </div>
</body>
</html>

同样的给右边盒子添加overflow:hidden，超出部分被隐藏了，如下图：
在这里插入图片描述
我们可以给里面的pre标签添加overflow-x:auto,如下

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {

            width: 800px;

            background-color: #ddd;
            border: 1px solid black;

            display: flex;
        }
        .container .left-box {

            width: 300px;

            flex-shrink: 0;

            background-color: #bfa;
        }
        .container .right-box {

            flex-grow: 1;
            overflow: hidden; /* 重要的是这行代码，这样右边的盒子就不会超出父容器盒子的范围了 */
            
            background-color: pink;
        }
        pre {
            background-color: #282c34;
            color: #fff;

            overflow-x: auto; /* 添加水平方向自动滚动条 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">
            <pre>
                <code>
@Override
public List listCategoriesBySearch(ConditionVO condition) {
    // 搜索分类
    List categoryList = categoryDao.selectList(new LambdaQueryWrapper()
            .like(StringUtils.isNotBlank(condition.getKeywords()), Category::getCategoryName, condition.getKeywords())
            .orderByDesc(Category::getId));
    return BeanCopyUtils.copyList(categoryList, CategoryOptionDTO.class);
}
                </code>
            </pre>
            123
            <pre>
            <code>
@Autowired
private CategoryDao categoryDao;
@Autowired
private ArticleDao articleDao;
                </code>
            </pre>
        </div>
    </div>
</body>
</html>

还有一种情况是，右边的内容是文字，但是文字超出宽度，需要显示省略号
参考：css列表示例&flex布局子元素超出父容器宽度问题
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        .container {

            width: 800px;

            background-color: #ddd;
            border: 1px solid black;

            display: flex;
        }
        .container .left-box {

            width: 300px;
            min-height: 100px;

            flex-shrink: 0;

            background-color: #bfa;
        }
        .container .right-box {

            flex-grow: 1;
            overflow: hidden;
            
            background-color: pink;
        }
        .title1 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .title2 {

            display: block; /* 必须设置为block,下面的设置才会生效 */

            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .title3 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .title4 {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .title5 {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            /* 当title5里面全是英文，且没有任何分隔符时，需要加上word-break: break-all; */
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="left-box">

        </div>
        <div class="right-box">

            <h2 class="title1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.</h2>
            
            <br/>
            
            <span class="title2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.</span>
            
            <br/>

            <div class="title3">
                <span >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.</span>
            </div>

            <br/>

            <div class="title4"> <!-- 省略样式写在这里没有用, 要写在下面这个div才有用 -->
                <div>
                    <span >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.</span>
                </div>
            </div>

            <br/>

            <div class="title5">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.
            </div>
        </div>
    </div>
</body>
</html>

再看一个示例
在这里插入图片描述
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('//at.alicdn.com/t/c/font_3916097_p205l52oy7.css');
        body {
            margin: 0;
            padding: 0;
        }
        
        .wrapper {
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            width: 260px;
            background-color: rgb(236, 255, 231);
        }
        
        .title-wrapper {

            flex-grow: 1; /* flex-shrink 默认为 1 , 所以这里可以不指定flex-shrink, 必须指定flex-shrink: 1;*/
            overflow: hidden; /* 重要的是这行代码, 即使flex-grow:1, 也不会在内容过长时而超出范围 */
            

            cursor: pointer;
        }

        .title {
            text-overflow: ellipsis;
            white-space: nowrap; /* white-space属性为nowrap时，不会因为超出容器宽度而发生换行 */
            overflow: hidden;
        }
        .num {
            flex-shrink: 0;
            margin-left: 15px;
            user-select: none;
        }
    </style>
</head>
<body>
    
    <div class="wrapper">

            <div class="title-wrapper">
                <div class="title">
                    <i class="iconfont icon-dongtai"></i>
                    <span>我的风车我的风车我的风车我的风车我的风车我的风车</span>
                </div>
            </div>
            <span class="num">
                1000000篇
            </span>
    </div>
   
</body>
</html>

ps酷教程

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
flex布局左边宽度固定，右边宽度动态扩展问题

左边盒子和右边盒子在都没有设置高度的情况下，它们是等高的（因为默认-> align-items:stretch，它们的高度在flex容器没有设置高度的情况下，将由左边盒子和右边盒子最高的高度决定。但是如果在右边盒子里面放一个宽度为600px，高度为200px的黄色盒子，显然宽度已经超出了右边盒子的宽度，如下所示，我们看到左边的宽度不再是固定的300px了！/* 重要的是这行代码，这样右边的盒子就不会超出父容器盒子的范围了 */再看一个案例，右边放的是代码，我们看到右边盒子又是超出了父元素的宽度。
复制链接

扫一扫