使用flex图文混排

最新推荐文章于 2020-10-22 20:18:19 发布

原创最新推荐文章于 2020-10-22 20:18:19 发布 · 1.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#flex #css

css 专栏收录该内容

10 篇文章

订阅专栏

ps:全部在谷歌浏览器中测试

经典的图文混排

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
    <style type="text/css">
    a{
        display: flex;
        display: -webkit-flex;
        height: 100px;
        background: orange;
    }

    .img{
        width: 120px; 
        background: red;
    }
    .content{
        flex: 1;
        padding: 0 10px;
        overflow: hidden;
        background: skyblue;
    }
    </style>
</head>
<body>
<a href="">
    <div class="img">
        img
    </div>
    <div class="content">
        <h4>this is title</h4>
        <span>contentab</span>

    </div>
</a>
</body>
</html>
<script type="text/javascript" src="../jq/js/jquery-1.11.3.js"></script>
<script type="text/javascript">

</script>

父级使用display: flex,左侧用width：100px,右侧使用flex:1。会自动的水平排列，两个元素形成了类似display:inline-block效果

子级的高度问题

没有设置高度，但是两个子级元素高度却自动充满了父级元素
如果给他们设置高度，高度会生效

.img{
        width: 120px; 
        height: 50px;
        background: red;
    }
    .content{
        flex: 1;
        height: 60px;
        padding: 0 10px;
        overflow: hidden;
        background: skyblue;
    }

这里写图片描述

右侧文字过长

这里写图片描述

右侧文字过长则会产生挤压，导致左侧变窄（虽然设置了宽度）

但是如果加上overflow:hidden.则此现象不会出现
这里写图片描述

还有几个有趣的现象：
1. 右侧padding不起效果了。
2. 如果是一个短的字符串则会换行显示（正常情况都是这个样子）

给子元素的子元素加overflow:hidden

这里写图片描述

由上面两个图可知，p受到了padding的限制，span还是老样子

浏览器还自动加上了一些样式

溢出隐藏, …

这里写图片描述
用常用的方法 span 无法实现此效果

这里写图片描述

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

由上面可知，我们这3行代码，一般都是加载块级元素上，对其行内元素或文字起效果