flex布局 与 iconfont

flex布局与iconfont使用
了解flex是什么
2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性
任何容器都可以使用flex属性

div{
    display:flex;        // 默认写法
    display:inline-flex; // 行内元素使用flex
    display:-webkit-flex;// 浏览器兼容前缀写法
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

兼容情况
兼容当前主流浏览器，96%

容器形成主轴与侧轴，用来改变子元素的排列

容器属性

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-direction: row | row-reverse | column | column-reverse;

row:默认值，主轴为水平方向

div{
    display:flex;
    flex-direction:row|column|row-reverse|column-reverse
}

---

 flex-wrap 默认情况下，项目都排在一条线上。根据主轴方向排列。flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap: 默认值，默认不换行
wrap: 执行换行 第一行在上面
wrap-reverse: 执行换行第一行在下面

div{
    flex-wrap: nowrap | wrap | wrap-reverse;
}

---

justify-content属性定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐

flex-end：右对齐

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

div{
    display:flex;
    justify-content: flex-start | flex-end | center | space-between | space-around;
}

---

align-items属性定义项目在交叉轴上如何对齐。

 align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

div{
    display:flex;
    align-items: flex-start | flex-end | center | baseline | stretch;
}

---

align-content属性定义了多根轴线的对齐方式。


侧轴有空白且有多行时，设置弹性子元素侧轴上的对齐方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

子元素属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
    用法与z-index  相同

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。

---

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

iconfont使用

介绍几种库

1.使用现有的开源iconfont矢量图标字体库。如

阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。

fontello

http://fontello.com/

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

icomoon

http://icomoon.io/app/#/select

可以在线导入的SVG格式字体，并进行编辑，然后下载来使用。很酷吧！

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

这是我最喜欢的字库之一了，更新比较快。目前已经有369个图标了。

Glyphicon Halflings

http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

使用方法

@font-face {font-family: 'iconfont';
            src: url('../iconfont.eot'); /* IE9*/
            src: url('../iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('../iconfont.woff') format('woff'), /* chrome、firefox */
            url('../iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('../iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

    <div class='iconfont'>&#xe68d;</div>
    .iconfont{
         font-family:"iconfont" !important;
    }

设置完成后，我们给加属性，文字属性兼容