flexbox的优势

随着移动设备的普及,各种响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率,这无疑使布局的逻辑变得更加复杂.
我们需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果

CSS3 规范中引入的新布局模型：弹性盒模型（flex box）。弹性盒模型可以用简单的方式满足很多常见的复杂的布局需求,它能以更加高效的方式来对容器中的盒子进行布局、对齐和分配空间,即使盒子尺寸未知或动态时也能工作

flexbox的属性

通过flexbox来布局可以轻松实现各种负责的布局,并且提供的属性不是很多,学习难度一般,归纳下,主要有如下几个属性(以下写的都是2012版提供的标准写法,):

在这之前如果你对主轴与交叉轴的概念或者对每个属性有哪些值还不是很清楚,请看上一篇文章flexbox基础知识入门

 display:flex;
 flex-direcition 确定主轴的方向
 flex-wrap 当子容器超出父容器时如何排列
 flex-flow 是flex-direction和flex-wrap的复合属性
 order 作用在子容器上,用来改变子容器的排列顺序,值越小,排列越靠前
 justify-content 在主轴的排列方式
 align-items 在交叉轴的排列方式
 align-content  在交叉轴方向上的空白处理,但如果又只有单行时,该属性不起作用
 align-self 设置子容器覆盖父容器指定的对齐方式,如果子容器margin值设为auto,则不起作用

最后三个是比较重要的,也是弹性盒模型的核心之处,弹性的处理盒子的尺寸
细分属性:flex-grow   flex-shrink flex-basis
上者三个的复合属性:flex

flex-grow 有多余空间时,该值起作用
flex-shrink 有溢出空间时,该值起作用
flex-basis 子容器被调整之前的初始值  

flex组合写法的总结

    flex:atuo ->flex:1 1 atuo
    flex:none -> flex:0 0 auto
    flex:1 -> flex:1 1 0%
    flex:0% -> flex:1 1 0%
    flex: 2 100px ->flex: 2 1 100px 

flexbox的实例

1.网格布局 就是平均分布。在容器里面平均分配空间 ,但需要项目自动缩放,自动缩放这点是把flex-basis设置成了auto来实现的,当前也可以对部分元素设置百分比,其他的子容器平均分配多余的空间

<div class="container">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>
<style type="text/css"> 
.container{
  display: flex;
}

.item {
  flex: 1;
}
</style>

2.常见的三栏布局

html部分:
<div class="wrapper">
    <header class="header">Header</header>
    <article class="main">
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </article>
    <aside class="aside aside-1">Aside 1</aside>
    <aside class="aside aside-2">Aside 2</aside>
    <footer class="footer">Footer</footer>
</div>

 css部分:
     <style type="text/css">
        .wrapper {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-flow: row wrap;
            flex-flow: row wrap;
            font-weight: bold;
            text-align: center;
        }

        .wrapper > * {
            padding: 10px;
            flex:1 100%;

        }

        .header {
            background: tomato;
        }

        .footer {
            background: lightgreen;
        }

        .main {
            text-align: left;
            background: deepskyblue;
        }

        .aside-1 {
            background: gold;
        }

        .aside-2 {
            background: hotpink;
        }

        @media all and (min-width: 800px) {
        .main    { flex: 3 0%; }

        .aside-1 { order: 1; }
        .main    { order: 2; }
        .aside-2 { order: 3; }
        .footer  { order: 4; }
        }

        @media all and (min-width: 600px) {
            .aside { flex: 1 auto;}
        }

    </style>

3.输入框的布局
我们常常需要在输入框的前方添加提示，后方添加按钮。

html部分:

<div class="InputBox">
  <span class="InputBox-item">...</span>
  <input class="InputBox-field">
  <button class="InputBox-item">...</button>
</div>

css部分:
.InputBox{
  display: flex;
}

.InputBox-field {
  flex: 1;
}

4.流式布局或或垂直居中等

以上为个人理解,如有错误欢迎指正