CSS的flex常用布局

最新推荐文章于 2023-10-19 22:58:29 发布

码上暴富

最新推荐文章于 2023-10-19 22:58:29 发布

阅读量545

点赞数

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

本文链接：https://blog.csdn.net/weixin_53483257/article/details/122534388

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

CSS的flex常用布局

CSS的flex左边固定右边自适应例子
CSS的flex左边自适应右边固定例子
CSS的flex两边固定中间自适应例子
CSS的flex上下固定中间自适应例子
CSS的flex单行省略号
CSS的flex多行省略号

CSS的flex左边固定右边自适应例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>css flex 左边固定右边自适应例子</title>
    <style>
        body {
            padding: 5px
        }
        #boxs {
            width: 80%;
            height: 100px;
            border: 1px solid #333;
            display: flex;
        }
        .left {
            width: 200px;
        }
        .right {
            flex: 1;
            /*
            flex-grow:1;
            flex-shrink:1;
            */
        }
    </style>
</head>
<body>
<div id="boxs">
    <div class="left" style="background-color:#ffc5c5;">左边固定宽度</div>
    <div class="right" style="background-color:#7171f7;">右边自适应宽度</div>
</div>
</body>
</html>

结果
在这里插入图片描述

CSS的flex左边自适应右边固定例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>css flex 左边自适应右边固定例子</title>
    <style>
        body {
            padding: 5px
        }
        #boxs {
            width: 80%;
            height: 100px;
            border: 1px solid #333;
            display: flex;
        }
        .left {
            flex: 1;
            /*
            flex-grow:1;
            flex-shrink:1;
            */
        }
        .right {
            width: 200px;
        }
    </style>
</head>
<body>
<div id="boxs">
    <div class="left" style="background-color:#ffc5c5;">左边自适应宽度</div>
    <div class="right" style="background-color:#7171f7;">右边固定宽度</div>
</div>
</body>
</html>

结果
在这里插入图片描述

CSS的flex两边固定中间自适应例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>css flex 两边固定中间自适应例子</title>
    <style>
        body {
            padding: 5px
        }
        #boxs {
            width: 90%;
            height: 100px;
            border: 1px solid #333;
            display: flex;
        }
        .dwidth {
            width: 150px;
        }
        .center {
            flex: 1;
        }
    </style>
</head>
<body>
<div id="boxs">
    <div class="dwidth" style="background-color:#ffc5c5;">左边固定宽度</div>
    <div class="center" style="background-color:#b9f;">中间自适应宽度</div>
    <div class="dwidth" style="background-color:#7171f7;">右边固定宽度</div>
</div>
</body>
</html>

结果
在这里插入图片描述

CSS的flex上下固定中间自适应例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>css flex 上下固定中间自适应例子</title>
    <style>
        body {
            padding: 5px
        }
        #boxs {
            width: 90%;
            height: 300px;
            border: 1px solid #333;
            display: flex;
            flex-direction: column
        }
        .dheight {

            height: 50px;
        }
        .center {
            flex: 1;

        }
    </style>
</head>
<body>
<div id="boxs">
    <div class="dheight" style="background-color:#ffc5c5;">上边固定宽度</div>
    <div class="center" style="background-color:#b9f;">中间自适应宽度</div>
    <div class="dheight" style="background-color:#7171f7;">下边固定宽度</div>
</div>
</body>
</html>

结果
在这里插入图片描述

CSS的flex单行省略号

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>css flex 1 单行省略号</title>
    <style>
        body {
            padding: 5px
        }
        #boxs {
            width: 80%;
            height: 100px;
            border: 1px solid #333;
            display: flex;
        }
        .left {
            width: 200px;
        }
        .right {
            flex: 1;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div id="boxs">
    <div class="left" style="background-color:#ffc5c5;">左边固定宽度</div>
    <div class="right" style="background-color:#7171f7;">
        右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度
    </div>
</div>
</body>
</html>

结果
在这里插入图片描述

CSS的flex多行省略号

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>css flex 多行文本省略号</title>
    <style>
        body {
            padding: 5px
        }
        #boxs {
            width: 80%;
            height: 84px;
            border: 1px solid #333;
            display: flex;
        }
        .left {
            width: 200px;
        }
        .right {
            flex: 1;
            max-height: 84px;
            display: -webkit-box;
            -webkit-line-clamp: 4;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="boxs">
    <div class="left" style="background-color:#ffc5c5;">左边固定宽度</div>
    <div class="right" style="background-color:#7171f7;">
        右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度右边自适应宽度
    </div>
</div>
</body>
</html>

结果
在这里插入图片描述

码上暴富

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS的flex常用布局

CSS的flex常用布局CSS的flex左边固定右边自适应例子CSS的flex左边固定右边自适应例子CSS的flex两边固定中间自适应例子CSS的flex上下固定中间自适应例子CSS的flex单行省略号CSS的flex多行省略号
复制链接

扫一扫