flex布局实例

最新推荐文章于 2023-04-19 15:23:47 发布

莱德贝贝

最新推荐文章于 2023-04-19 15:23:47 发布

阅读量183

点赞数

文章标签： flex css css3 html

本文链接：https://blog.csdn.net/qq_43455872/article/details/106430347

版权

效果如图所示:
flex实例

分析：

右边靠flex:1填充剩余空间
左边定义图片大小
右边文本上下布局依据，display:flex,主轴为column，justify-content：space-between

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .item {
            min-height: 100px;
            display: flex;
            align-content: flex-start;
        }
        .left {
            padding: 10px;
        }
        .left img {
            width: 100px;
            height: 100px;
        }
        .right {
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            flex: 1;
            padding: 10px 0;
        }
        .title {
            font-size: 15px;
            color: #333;
            margin-bottom: 5px;
        }
        .detail {
            color: #666;
            font-size: 12px;
            margin-bottom: 5px;
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="item">
        <div class="left">
            <img src="image.jpg" alt="">
        </div>
        <div class="right">
            <div class="desc">
                <div class="title">避风苑</div>
                <div class="detail">[高铁东站、龙昆南]套餐2选1，提供免费WiFi</div>
            </div>
            <div class="bottom">
                <div class="price">52元 门市价：95元</div>
                <div class="sold">已售：15367</div>
            </div>
        </div>
    </div>
</body>
</html>

莱德贝贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
flex布局实例

效果如图所示:分析：右边靠flex:1填充剩余空间左边定义图片大小右边文本上下布局依据，display:flex,主轴为column，justify-content：space-between<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i
复制链接

扫一扫