Flex应用

Flex布局在实际布局中的应用场景

简单的实例演示Flex的布局使用

2018-05-23侠课岛    基础入门       

前端/前端必修/使用CSS3的Flex弹性布局 20     0     2616

在前面几节介绍完了Flex布局的一些基础属性,最后我们再来总结一下Flex布局在实际布局中的应用场景:

元素的垂直水平居中

垂直水平居中是我们在实际布局中经常遇到的场景,如果使用传统布局方式,实现垂直居中比较麻烦,如果是在flex布局就会比较简单啦。只需要简单的三行代码:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

36.png

多列布局

多列布局也是页面布局里最常见的,最常用的是两列或者三列布局,往往是一列固定宽,另外一列宽度自适应,用Flex布局便可以轻松实现。

  • 两列 :一列定宽,一列自适应

    <div class="container1">
            <div class="item1">1</div>
            <div class="item2">2</div>
    </div>  
        
            <style>
            .container1{
                display: flex;
                align-items: stretch;
            }
            .item1{
                flex: 0 0 50px;
            }
            .item2{
                flex:1;
            }
            </style>

    37.png

  • 三列 : 两列定宽,一列自适应

<div class="container1">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div  class="item3">3</div>
</div>  

<style>
   .container1{
        display: flex;
        align-items: stretch;
    }
    .item1{
        flex: 0 0 50px;
    }
    .item2{
        flex:1;
    }
   .item3{
        flex:0 0 70px;
    }
</style>

    38.png

  • 三列 : 各列等分布局。等分布局其实也就是网格布局啦,在实际项目中应用场景也非常多,我们完全在公共样式里面用Flex布局来创建一个属于自己的自适应网格布局样式啦~

<div class="container1">
    <div class="item1">1</div>
    <div class="item2">2</div>
    <div  class="item3">3</div>
</div>  

<style>
    .container1{
        display: flex;
        align-items: stretch;
    }
    .item1{
        flex: 0 0 33.33%;
    }
    .item2{
        flex:0 0 33.33%;
    }
    .item3{
        flex:0 0 33.33%;
    }
</style>

39.png

经典网页布局+底栏固定

实现经典网页布局包括三行+三栏,同时还要实现当页面内容不足以撑到底部的时候,底部栏也能固定在下方。
实现原理就是,先将容器的最小高度设置成窗口高度,子项目沿着交叉轴纵向排列,然后中间的内容块设置成flex-grow:1,内容块就可以自动撑开,这样底部栏就会被撑到最下面去。,如果想要底部栏在页面的最底部,设置容器高度为100px即可。

<div class="box container2">
    <div class="head">头部</div>
    <div class="content">
        <div class="item-1">内容1</div>
        <div class="item-2">内容2</div>
        <div class="item-3">内容3</div>
    </div>
    <div class="foot">底部栏</div>
</div>

<style>
.container2{
    display: flex;
    flex-direction: column;
}
.container2>div{
    width: 100%;
    color: #fff;
    text-align: center;
}
.head{
    background-color: #FE938C;
    height: 100px;
}
.content{
    flex: 1;
    display: flex;
}
.content div{
    background-color: #E76F51;
    flex:1;
    align-items: stretch;
}
.foot{
    background-color: #E9C46A;
    height:100px;
}
</style>

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

20

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?