5

一,为什么写这篇文章

在很早之前就接触display:flex布局,尤其是不考虑低版本浏览器兼容之后,就开始肆无忌惮的使用了。之前做pc端的时候,要求兼容到ie8,也不会注意到它。后来做移动端,第一次看到display:flex,还是从一个实习生的代码里,然后查了查资料,居然是这么方便。


简单的使用及原理请查看阮一峰大神的讲解


二.基本使用

父元素

{
    display:flex;
}
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

可以有6个属性可以设置,具体不再细说。

子元素

{
    flex:none | auto; /* default auto */
}

/* 1表示该元素撑满剩余空间 */
{
    flex:1
}

我主要想说的是子元素的flex属性,刚接触时确实不好理解。理解了这个就可以实现左固定右自适应的这种布局,通常出现在列表显示的时候。网上还通常见到flex:1 |none|auto 的这种写法,就是下面这几个属性在作祟。

每个子元素也称为 “项目”,属性值有:

1、order  //定义各个子元素的排列顺序,数值越小,排列越靠前,默认为0,可为负数
     

     .item{
         order:-1;/* 任意数字 */
     }

2、flex-grow  //定义子元素的放大比例,默认为0(不放大),前提是父容器有空余空间

    
    .item{
         flex-grow: <number>; /* default 0 */
     }

3、flex-shrink  //如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

负值对该属性无效。

    
    .item{
         flex-shrink: <number>; /* default 1 */
     }

4、flex-basis  //在子元素分配空余空间前,设定指定的子元素的空间大小,默认auto(原值)

    
    .item{
         flex-basis: <length> | auto; /* default auto */
     }
    /* 可以设置60% 或者 200px */

5、flex  //是flex-grow、flex-shrink、flex-basis的组合,默认值flex:0 1 auto;

    
    .item{
         flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
     }
     /* 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto) */
     /* 建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值 */

6、align-self  //允许单个子元素与其他子元素不一样的对齐方式,可以覆盖父元素设定的align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同stretch(填充满)。

    
    .item{
         align-self: auto | flex-start | flex-end | center | baseline | stretch;
     }

我们通常用到的就是这个flex属性,在布局的时候会很有用。


对于这个属性,最好是手动敲一下,尝试一下各种值出现的效果。

三.圣杯布局

layout布局一直是css很重要的知识点,在面试中也会经常遇到,这里就用flex做一个圣杯布局。

css

*{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    body{
        display: flex;
        flex-direction:column;
    }
    .header,.footer{
        flex: 0 0 80px;
        background-color: #7dbcea;
    }
    .container{
        flex: auto;
        background-color: #145d9c;
        display: flex;
    }
    .container .left,.container .right{
        flex: 0 0 200px;
        background-color: #3a90ce;
    }
    .container .main{
        flex: auto;
        background-color: #145d9c;
    }

html

<div class="header"></div>
<div class="container">
    <div class="left"></div>
    <div class="main"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>



强子
335 声望10 粉丝

尽人事,安天命!