css利用flex实现左-中-右布局

最新推荐文章于 2024-03-13 18:09:44 发布

GuanJdoJ

最新推荐文章于 2024-03-13 18:09:44 发布

阅读量5.1k

点赞数 1

分类专栏：学习积累文章标签： css flex

本文链接：https://blog.csdn.net/GuanJdoJ/article/details/95966259

版权

学习积累专栏收录该内容

24 篇文章 2 订阅

订阅专栏

一、

样式：

代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .wrap{
            overflow: hidden;
            line-height: 28px;
            padding: 10px 10px;
            display: flex;
            background: #F2F2F2;
        }
        .fl{
            float: left;
            display: flex;
            align-items: center;
            padding: 0 20px 0 8px;
        }
        .fr .deliveryStatus {
            text-align: right;
        }
        .fm{
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .fm .inner > div{
            padding-right: 4%;
            text-align: left;
            float: left;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="fl">Icon</div>
        <div class="fm">
            <div class="inner">
                <div>象屿库</div>
                <div>订单编号：1234567890</div>
                <div>提货函编号：1234567890</div>
                <div>提货方式：自提</div>
            </div>
            <div class="inner">
                <div>买家：找钢网</div>
                <div>联系人：JOJO 15112341234</div>
                <div>提货凭证：凭证</div>
                <div>备注：无</div>
            </div>
        </div>
        <div class="fr">
            <div class="deliveryStatus">正在提货</div>
            <div>提货函时间：2019-07-15 16:03:55</div>
        </div>
    </div>
</body>
</html>

二、

样式：

代码：

替换.fm .inner > div为，能够实现上下对齐：

.fm .inner{    
     display: flex;
}
.fm .inner > div{
      padding-right: 1%;
      flex: 1;
 }

上下对齐需要上下的div数是一样的，可以使用<div> </div>来占位

flex = flex-grow（缩小比例） + flex-shrink（放大比例） + flex-basis（元素在主轴上的初始尺寸）

具体用法可参考这两篇文章：

Flex 布局教程:语法篇 - 阮一峰的网络日志

30分钟彻底弄懂flex布局 - 腾讯云+社区 - 博客园

GuanJdoJ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css利用flex实现左-中-右布局

一、样式：代码：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .wrap{ overflow: hidden; line-height:...
复制链接

扫一扫