display:flex 在布局中的妙用

Posted 圈地自萌

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display:flex 在布局中的妙用相关的知识,希望对你有一定的参考价值。

最近越来越依赖display:flex 了。本来只是在移动端用来作弹性布局,现在在PC端,我基本用它来取代 float:left。比如昨天做的一个专题,基本都用 flex 来布局。

但是这其中的原理呢,flex布局的相对于float的优势又在哪呢。只是对这些有一个模糊的概念。

比如float:left/right 这个功能,一般用来排版。而它的高度塌缩,一些潜在的未被触发的问题,总是给人一种很“不靠谱”的感觉。

先来盘点下float的特性:

1. 脱离当前文档流。浮动盒子会贴着容器或者另一个浮动元素的边缘(包括水平方向和垂直方向的边缘),宽度不够的话,就排到下一行。

举个例子:

    <style>
        .box1 {
            width: 100px;
            height: 100px;
            background: #aedbf0;
            float:left;
        }
        .box2 {
            width: 100px;
            height: 150px;
            background: #ffbe84;
            float:left;
        }
        .box3 {
            width: 100px;
            height: 100px;
            background: #d4e280;
            float:left;
        }
        .parent {
            overflow: hidden;
            padding: 10px;
            border:1px solid #005e96;
            text-align:left;
            width: 250px; /*这里设置宽度为250px,无法容下3个100px宽度的方块*/
            /*height: 200px;*/
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</div>
</body>

这里将第二个浮动元素的高度设置为150px,比其他多了50。效果如下:

如果将第一个浮动元素设置为150px,则效果如下:

2. 文档流的行内元素将会围绕浮动元素,这个和块状元素不一样。块状元素如果不设置float属性,则会被浮动盒子覆盖。比如文字环绕效果。

 

3. 对于浮动元素,top/left/right/bottom, z-index无效。(貌似很久前,我在使用z-index时被这个坑过...)

4. 形成 block formatting context (BFC)。创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素。

 

二、display: flex

1. 垂直居中 align-items: center;

配合align-items: center,轻松达到垂直居中的效果,好用到哭。解决了折磨我几百年的图片和多行文字垂直居中的问题。

具体效果可以点这里查看,垂直居中的几个办法

Flex布局教程语法篇

在实际开发中,假设我有并列两个div,两个div宽度不一致。假设比较小的flex盒子宽度比例设置为1,那么另外一个的宽度比例 = 大盒子宽度/设置比例为1的盒子宽度。

这样,当包裹两个flex盒子的容器整体宽度需要发生改变时,就不需要再去更改两个盒子的宽度。

<style>
        .tips {
            max-width: 800px;
            height: 100px;
            display: flex;
            align-items: center; // 在容器设置这个属性,达到垂直居中效果。
            background-color: #1e5dad;
            border-radius: 15px;
            margin: 25px auto;
        }
        .tips div:nth-child(1) {
            flex: 1; //小盒子比例为1
            margin-left: 25px;
        }
        .tips div:nth-child(2) {
            flex: 9.5; //大盒子宽度比例 = 大盒子宽度/小盒子宽度
        }
        .tips p {
            color: #fff;
            text-align: left;
            font-size: 20px;
            line-height: 31px;
        }
    </style>
</head>
<body>
<div class="tips">
    <div>
        <img src="images/doc.png" alt="">
    </div>
    <div>
        <p>注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。</p>
    </div>
</div>
</body>

效果图如下:

再来看看另外一个复杂点的例子:

    <style>
        *{ /*实际开发中,别这样偷懒哦*/
            margin: 0;
            padding: 0;
        }
        .frequency {
            max-width: 1000px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            background-color: #f3f4f6;
            height: 175px;
        }
        .fre_left {
            flex: 1;
        }
        .fre_right {
            flex: 4.78;
        }
        .fre_left div {
            color: #fff;
            width: 100px;
            height: 100px;
            background-color: #3ac1d5;
            border-radius: 50%;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border: 10px solid #e7eef8;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
        }
        .fre_left p {
            font-size: 26px;
            height: 24px;
            line-height: 31px;
            padding-top: 17px;
        }
        .fre_right ul {
            display: flex;
        }
        ul, ol {
            list-style: none;
        }
        .fre_right ul li {
            flex: 1;
            color: #4c4c52;
            font-size: 16px;
            line-height: 31px;
        }
        .fre_right ul li:before {
            content: url(images/arrow.png);
        }

    </style>
</head>
<body>
<div class="frequency">
    <div class="fre_left">
        <div>
            <p>热点<br>问题</p>
        </div>

    </div>
    <div class="fre_right">
        <ul>
            <li> 一、Flex 布局是什么?</li>
            <li> 二、基本概念</li>
            <li> 三、容器的属性</li>
        </ul>
        <ul>
            <li> flex-direction属性决定主轴的方向</li>
            <li> flex-wrap属性定义如何换行。</li>
            <li> flex-flow属性默认值为row nowrap</li>
        </ul>
        <ul>
            <li> justify-content属性定义了项目在主轴上的对齐方式。</li>
        </ul>
    </div>
</div>
</body>

效果图如下:

在CSS布局中,Flex布局还有许多妙用,等待研究。

但是并不是什么时候都一股脑儿用这个。实际上每一种方式都有它自己的优势和缺陷。

比如,Flex 布局下,

1. 子元素的float、clear和vertical-align属性将失效。
2. 移动端img标签下的图片,如果设定了宽度,未设定高度,图片高度产生变形。原因是:align - items 属性的默认值:
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

 

以上是关于display:flex 在布局中的妙用的主要内容,如果未能解决你的问题,请参考以下文章

flex布局兼容IE10

display:flex 布局详解

Flex 弹性布局

弹性盒布局

弹性布局

flex布局