实例详解:Flex布局(二)

在之前的一篇文章:详解CSS的Flex布局中介绍了CSS的Flex布局的基本知识,包括flex-container的6个属性,以及flex-item的6个属性。同时也提到过,通过使用Flex布局,可以很优雅地解决很多CSS布局问题。本文将通过三个简单的实例,实际应用上篇文章的基础理论知识,展示下Flex布局是如何解决CSS布局问题。

一.垂直居中

这里同时用非flex布局和flex布局两种方式来实现,可以对比两种实现方式的差异。

1.1用margin实现垂直居中

实现方式:

父元素采用相对定位,子元素采用绝对定位,先将元素的定点定位到父元素的中心,再使用margin负值法,即子元素自身宽度、高度的一半,将其拉回到父元素的中心。

实现效果:

附上完整代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>垂直居中--normal</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 500px;
            height: 300px;
            margin: 80px;
            border: 1px solid blue;

            position: relative;
        }

        .item {
            width: 300px;
            height: 200px;
            border: 1px solid red;

            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -100px;

        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"></div>
    </div>
</body>

</html>

1.2用flex实现垂直居中

实现方式:

父元素启用flex布局(display:flex),同时设置主轴上居中对齐(justify-content:center)、交叉轴上居中对齐(align-items:center)。子元素不需要额外设置样式。

实现效果:同上

附上完整代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>垂直居中--flex</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .container{
            width:500px;
            height:300px;
            margin:80px;
            border:1px solid blue;

            display:flex;
            justify-content: center;
            align-items: center;
        }
        .item{
            width:300px;
            height:200px;
            border:1px solid red;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"></div>
    </div>
</body>
</html>

二.圣杯布局

2.1 普通方式实现圣杯布局

在我之前的文章圣杯布局与双飞翼布局中详细介绍过如何实现一个圣杯布局:

(1)中间的三栏布局,这里采用margin负值法:两边两栏宽度固定,中间栏宽度自适应,左栏、右栏、中间栏向左浮动,左栏的margin-left设为-100%,中间栏的width设为100%,右栏的margin-left设为-右栏宽度。

(2)给container设置padding-left和padding-right属性,值分别为左栏、右栏的宽度;

(3)将左右两栏设置为相对定位,同时左栏的left值设为-左栏宽度,右栏的right设为-右栏宽度。

实现效果:

实现代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        header,
        footer {
            height: 100px;
            width: 100%;
            background-color: #bbbbbb;
        }

        .container {
            height: 300px;
            
            /* 圣杯布局 */
            padding-left: 200px;
            padding-right: 300px; 
        }

        .container div{
            float: left;
            
            /* 圣杯布局 */
            position:relative;
        }

        .left {
            width: 200px;
            height: 300px;
            background-color: #DC698A;

            margin-left: -100%;
            /* 圣杯布局 */
            left:-200px;
        }

        .middle {
            width: 100%;
            height: 300px;
            background-color: #3EACDD;

        }

        .right {
            width: 300px;
            height: 300px;
            background-color: #8CB08B;
    

            margin-left: -300px;
            /* 圣杯布局 */
            right:-300px;
        }
    </style>
</head>

<body>
    <header>头部</header>
    <div class="container">
        <div class="middle">中间栏:内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
    </div>
    <footer>底部</footer>
</body>

</html>

2.2用flex实现圣杯布局

实现方式:

(1)holyGrail启用flex布局,设置holyGrail中的header、container、footer在交叉轴上竖向排列(flex-direction:column;)

(2)container中的三栏布局:container启用flex布局,设置container中的middle、left、right在主轴上横向排列(flex-direction:row,默认值可以不设)。由于html中先写的middle,所以为了让left在最左边,要设置left的order为这三栏中最小的,即-1(其他两栏order为默认值0)

可以看出Flex布局的实现方式更加简单,也更加直观。

实现效果:同上

实现代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>圣杯布局--flex</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }
        .holyGrail{
            display: flex;
            flex-direction: column;
        }
        header,
        footer {
            height: 100px;
            width: 100%;
            background-color: #bbbbbb;

            flex: 1; /*flex:1; === flex:1 1 auto;*/
        }

        .container {
            height: 300px;
            
            display: flex;
            flex-direction: row;/*可不写,默认值*/
            flex:1;/*需要可自动扩展*/
        }


        .left {
            width: 200px;
            height: 300px;
            background-color: #DC698A;

            order:-1;/*左边栏放到最左边*/
        }

        .middle {
            width: 100%;
            height: 300px;
            background-color: #3EACDD;

            flex:1;
        }

        .right {
            width: 300px;
            height: 300px;
            background-color: #8CB08B;
        }
    </style>
</head>

<body class="holyGrail">
    <header>头部</header>
    <div class="container">
        <div class="middle">中间栏:内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        <div class="left">左栏</div>
        <div class="right">右栏</div>
    </div>
    <footer>底部</footer>
</body>

</html>

三.固定栏-可扩展栏页面布局

实现效果:

实现代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 300px;
            height: 200px;
            border: 1px solid blue;

            display: flex;
            flex-direction: column;
        }

        .nav {
            height: 50px;
            background-color: grey;

            display: flex;
            flex-direction: row;
        }

        .nav-item {
            min-width: 60px;
            border: 1px solid orangered;
        }

        .main {
            display: flex;
            flex-direction: row;
            flex: 1;
            /*main区域需要自动扩展*/
        }

        .main-left {
            width: 100px;
            /*main中的left区域固定*/
            background-color: #DC698A;
        }

        .main-right {
            background-color: #3EACDD;
            flex: 1;
            /*main中的right区域需要自动扩展*/
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="nav">
            <div class="nav-item">nav1</div>
            <div class="nav-item">nav2</div>
            <div class="nav-item">nav3</div>
        </div>
        <div class="main">
            <div class="main-left">固定栏:内容内容内容内容内容内容内容内容内容内容</div>
            <div class="main-right">可扩展栏:内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        </div>
    </div>
</body>
<script type="text/javascript">
    (function run() {
        $(".container").animate({ width: 500, height: 300 }, 1500,
            () => {
                $(".container").animate({ width: 300, height: 200 }, 1500, run)
            }
        )
    }());
</script>

</html>

四.小结

本文主要提供了三个实例,来实际应用下flex的属性。通过对比其他的实现方式,可以看出使用Flex布局可以优雅地实现相同的CSS布局问题。如有问题,欢迎指正。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏WebDeveloper

这种div高度自适应确定你知道吗?

15220
来自专栏smy

多行图片hover加边框兼容IE7+

问题: 遇到多行多列排列的图片时,hover上去加边框会把下面的图片挤到别处 =========================================...

35460
来自专栏腾讯NEXT学位

CSS布局解决方案(上)

31540
来自专栏DannyHoo的专栏

单元格的点击问题

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

14610
来自专栏.Net移动开发

VisualStudio移动开发(C#、VB.NET)Smobiler开发平台——BarcodeView控件的使用方式,.Net移动开发

      设置控件类型,将BarcodeFormat属性设置为“QRCode”,让控件显示为二维码,如图1;

16720
来自专栏HTML5学堂

SVG - 动画制作

SVG - 动画制作 HTML5学堂:SVG - 动画制作。上一篇文章讲解了SVG的基本属性,大家能够利用SVG的基本属性进行绘制图像,那么如何让绘制好的图像动...

602100
来自专栏菜鸟计划

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。 三种关系:相邻,嵌套,重叠。 下面介绍网页布局的常用几种方式 ? 1.一列布局: 一般都是固定的宽高...

40660
来自专栏web前端-

JQ事件和事件对象

  //mouseover()/mouseout()和mouseenter()/mouseleave()的区别

30320
来自专栏游戏杂谈

CCLabelAtlas的宽度为奇数时的显示bug

遇到一个很郁闷的bug,CCLabelAtlas设置文字内容在ipad上和android上正常,就只有iphone怎么显示都不正常。后来把它宽度 + 1,然后就...

13010
来自专栏互联网软件技术

图片懒加载

插件地址:https://github.com/tuupola/jquery_lazyload/tree/2.x

37330

扫码关注云+社区

领取腾讯云代金券