C3:使用flex弹性布局

头像
BBQ只有番薯
    阅读 5 分钟
    1

    垂直居中

    相信我们大多数人都是从static,浮动，定位这三种布局方式来开始制作网页的。在大多数的业务需求下，浮动和定位都能够很好的满足我们的开发需要。即使是在响应式设计中，浮动和定位配合百分比，rem，媒体查询都能够解决大多数的问题。但是如果你只使用浮动和定位的话，碰到以下的场景你就会发现不是那么好用。

    clipboard.png

    黄色背景的段落在背景色#ccc的宽高不定的父容器中水平和垂直居中。如果只用浮动和定位的话，貌似很困难。我们得设置p段落相对于父容器绝对定位，left和top都为50%,在使用translate往左往上各移动-50%.

    .wrap{
    position:relative;
    background-color:#ccc;
    width:50%;
    height:60%;
}
p{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100px;
}

    其中的原理是p的left和top的百分比是相对于.wrap 父容器的宽高，而translate的百分比是相对于自身的宽高的。这样子也能做到元素在宽高不定的容器的垂直水平居中。但是，这不够优雅和实用，并且累赘。

    而使用flex的话就比较简单了。

    .wrap{
    width:50%;
    height:50%
    background-color:#ccc;
    display:flex;
    justify-content:center;
    align-items:center;
}

    flex的出现，可以让我们非常轻松地解决类似居中的问题。flex是弹性的意思，顾名思义，弹性才是flex的精髓所在。网上已经有很多篇介绍flex的专业文章了。诸如：
    Flex 布局教程：语法篇
    Flex 布局教程：实例篇
    一劳永逸的搞定 flex 布局

    flex的12个相关属性和主轴，交叉轴的概念

    对于flex最重要的就是知道其中的12个属性以及主轴交叉轴的概念。上面三篇文章已经详尽地解释了这些概念和属性的用法。总结出来就是一张图：

    clipboard.png

    flex-basis:该值决定了元素在主轴方向上的初始大小.当分配给这个元素的宽度小于这个值的时候,flex父容器内的元素开始拉伸或者缩小.默认取值auto,即是按照元素的width/height属性来决定的.可取的其他的值是px,rem,百分比.
    flex-direction:定义主轴的方向.可选的取值有row,columns,row-reverse,columns-reverse.
    flex-grow:flex元素拉伸的比例,
    flex-shrink:flex元素压缩的比例.
    justify-content:作用与父容器,定义主轴上的元素的排列方式.可选的值有:flex-start,flex-end,center,space-around,space-between.
    align-items:作用于父容器,定义交叉轴上的元素的排列方式,取值和意义同justify-content一样.
    align-self:作用于子容器,子元素自己定义自己在交叉轴上的排列方式.优先级比父元素指定的高.取值和意义同align-items.
    flex:flex-grow,flex-shrink,flex-basis的简写.
    flex-wrap:定义父容器是否换行.默认不换行.如果该元素取值为wrap.那么父容器中一行的长度不够容纳的时候,就换行显示,如果子容器的flex-basis 计算宽度/高度 大于 父容器的宽度/高度,就会压缩.否则就拉伸.
    flex-flow:flex-direction,flex-wrap的简写.
    order:作用于子容器,定义在主轴上的顺序.默认为0,最高.相同的order的情况下,按照在html的顺序来决定.

    兼容性

    flex的兼容性：IE10以下不支持。IE11以下需要加-ms-前缀。android4.4以下需要加-webkit-前缀

    布局实例

    假设我们的设计稿如下：

    clipboard.png

    分为两步：
    1.将图片的父容器设为display:flex;设置文字区域盒子为flex:1;

    clipboard.png

    2.设置文字区域盒子的display:flex；并且设置主轴向下：flex-direction:columns;
    clipboard.png

    完整代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name='viewport' content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>flex 用于产品列表布局</title>
    <style>
        *{
            padding:0;
            margin:0;
            border:none;
        }
        .list{
            display:flex;
            flex-direction:column;
            max-width:640px;
            min-width:320px;
            width:100%;
            margin:0 auto;
        }
        .item{
            border-bottom:1px solid #e0e0e0;
            padding:20px;
            display:flex;
            flex-wrap:wrap;
            
        }
        .item .img-con{
            width:100px;
            height:100px;
            position:relative;
            overflow:hidden;
        }
        .item .img-con img{
            width:100%;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        .item .text-con{
            font-size:14px;
            flex:1;
            margin-left:15px;
            /*background-color:#fccf00;*/
            align-self:stretch;
            display:flex;
            flex-direction:column;
            justify-content:space-around;
        }
        .item .text-con h4{
            max-height:34px;
            overflow:hidden;
            font-size:15px;
            line-height:1.066667;
        }
        .item .text-con strong{
            font-weight:normal;
            color:red;
            font-size:16px;
            line-height:1.625;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li class="item">
            <div class="img-con">
                <img src="./nature1.jpg" alt="product image" >
            </div>
            <!--产品文字信息-->
            <div class="text-con">
                <h4>上海品图包装设计/包装盒设计/精装纸盒设计上海品图包装设计</h4>
                <strong>1.5元/张</strong>
                <span>99℃</span>
            </div>
        </li>
        <li class="item">
            <div class="img-con">
                <img src="./nature1.jpg" alt="product image" >
            </div>
            <!--产品文字信息-->
            <div class="text-con">
                <h4>上海品图包装设计/包装盒设计/精装纸盒设计上海品图包装设计</h4>
                <strong>1.5元/张</strong>
                <span>99℃</span>
            </div>
        </li>
        <li class="item">
            <div class="img-con">
                <img src="./nature1.jpg" alt="product image" >
            </div>
            <!--产品文字信息-->
            <div class="text-con">
                <h4>上海品图包装设计/包装盒设计/精装纸盒设计上海品图包装设计</h4>
                <strong>1.5元/张</strong>
                <span>99℃</span>
            </div>
        </li>
        <li class="item">
            <div class="img-con">
                <img src="./nature1.jpg" alt="product image" >
            </div>
            <!--产品文字信息-->
            <div class="text-con">
                <h4>上海品图包装设计/包装盒设计/精装纸盒设计上海品图包装设计</h4>
                <strong>1.5元/张</strong>
                <span>99℃</span>
            </div>
        </li>
        
    </ul>
</body>
</html>
    html5flex布局移动端适配移动端页面
    BBQ只有番薯
    300 声望6 粉丝
    下一篇 »
    C1:DOM 元素的尺寸和位置

    引用和评论

    推荐阅读
    头像
    使用mocha测试TypeScript文件

    BBQ只有番薯阅读 5.1k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.2k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.4k评论 3

    头像
    面向企业级前端应用的开发框架 UI5 的发展简史介绍

    注销赞 5阅读 7.6k

    头像
    一个简易的DIY场景H5框架

    Undefined_0赞 5阅读 5k

    头像
    使用 URLSearchParams 轻松操作 URL

    tiee赞 1阅读 4.5k

    头像
    svg之viewBox

    zxl20070701赞 3阅读 1k

    0 条评论
    得票最新