flexbox布局

  在网页开发中，网页布局(layout)是css的一个重要应用。布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

  2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

当我把flex布局使用到我项目里，第一反应是“卧槽，还有这种操作”

下面我先用我的小demo讲解一下flex的功能，感受flex布局的魅力：
demo展示
（想看我的demo的话，在浏览器调式状态，进入手机模式，或者使用手机浏览）

  可能光看布局觉得没什么，传统布局也可以实现。不急，我把css晒出来你就会跟我一样爱上这款游戏，不对，是这种布局。
  首先，这个页面有两个地方用到了flex布局，我们先来看第一个。

header部分

HTML

<header>
        <div class="menu"></div>
        <div class="title">投票</div>
        <div class="xx"></div>    
</header>

CSS

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

  什么？三行css代码就搞定了？？？逗我？？？如果使用传统方案，我觉得不止3行代码，可能得10行左右的代码才能解决这样的布局效果把。
先申明使用flex布局

display: flex;

然后让两端对齐，元素之间的间隔都相等。

justify-content: space-between;

最后垂直居中

align-items: center;

后面我会系统的总结一下flex布局的功能以及使用。

mian部分

HTML

CSS

.items{
    display: flex;
    justify-content: space-around;
}

  emmmmmm…两条代码的事（懒癌笑）。
  
  这里讲解一下html的结构，每三个卡片为一个块（.tems）只要设置.items就可以实现。
  
先申明使用flex布局

display: flex;

然后每个元素两侧的间隔相等。所以，元素之间的间隔比项目与边框的间隔大一倍

justify-content: space-between;

flex布局的总结：

1.什么是flex布局。

  Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

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

2.基本概念
  采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。

  容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

Flex 布局示例

示例列举了弹性布局的全部功能。

  
  
  
  
  
相关链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html