FreeMusic项目优化（一）——flex布局学习记录

参考博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

flex布局是w3c于09年提出的，用于简便，整洁，响应式地解决布局问题的手段，例如垂直居中布局。flex全称Flexible Box，也称“弹性布局”。

块级元素设置flex布局：display:flex

行内元素设置flex布局：display:inline-flex

当设置flex属性之后，元素的float，vertical-align和clear样式将失效。

flex主要属性：主轴（main axis）+交叉轴（cross axis），主轴开始位置（main start），结束位置（main end），交叉轴开始位置（cross start），结束位置（cross end），单个项目占据的主轴空间（main size），单个项目占据的交叉轴空间（cross size）

一、容器的属性（6个）

1.flex-direction，决定了主轴的方向，属性值如下：

row：水平方向，起点在左边

row-reverse:水平方向，起点在右边

column:垂直方向，起点在上边

column-reverse:垂直方向，起点在下边

2.flex-wrap，定义了如果轴线排不下如何换行

nowrap:默认不换行

wrap:换行

wrap-reverse：换行，第一行在下方

3.felx-flow:flex-direction+flex-wrap，如写作：flex-flow:row wrap

4.justify-content:定义了元素在主轴的对齐方式

5.align-items:定义了元素在交叉轴的对齐方式

6.align-content:定义了多行情况下（多根轴线）的对齐方式，只有一根轴线的话该属性无效

二、项目属性（6个）

1.order：定义项目的排列顺序，数值越小越靠前，默认为0

2.flex-grow：定义项目的放大比例，默认为0，空间足够也不放大

3.flex-shrink（无负值）：定义项目的缩小比例，默认为1，空间不够则缩小

4.flex-basis：定义了项目占据的主轴空间，如设置flex-basis:300px，则项目占据固定大小，默认auto

5.flex：上述2-4的属性的汇总写法，默认0,1,auto，快捷写法：auto（1 1 auto）和none（0 0 auto）

6.align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认继承align-items属性，

 三、利用flex布局来优化项目布局，效果如下：

1.导航条

样式设置如下，主轴用了space-around布局，交叉轴用了center属性，利用flex布局来实现水平垂直居中真的是很简单。

#nav-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 80px;
    background-color: #2C3E50;
}

2.主页面

因为目前主页面的内容实在是太少了，所以想着要做一个效果就是让div自动填满屏幕余下的高度，也就是上图效果，清晰一点用手机看的话是这样，一直铺满余下空间：

正确简单的做法是利用flex布局：

1.给html body标签都设置height:100%

2.上图div的父div设置为flex布局，项目里父div是#app，样式如下：

    #app {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

3.然后是设置上图div，添加样式：flex:1，如下：

#main-page {
    flex: 1; /*这个属性是为了让div填满剩余屏幕高度*/
    width: 100%;
    background-color: #DCDCDC;
}

ps：还有另外一种实现方法，但是存在问题，就是直接设置子div（#main-page）的height:100%，但是这样会存在一个问题，因为项目中导航条这个div是有固定高度80px的，所以如果设置了#main-page的height:100%，那么页面高度会溢出80px，也就是会出现滚动条，目前没有想到比较好的解决方法。

后面基本都是利用felx布局把页面布局全部修改了一遍，还是比较简单的。