CSS3 : flex伸缩盒布局

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

  <div class="outer">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
  </div>

<style>
	.outer{
      border:1px solid red;
      display: flex;
    }
    .inner{
      flex:1;
      background-color: red;
      margin:10px;
    }
    .inner:nth-child(2){
      flex:2;
    }
</style>

上述代码大家可以发现，当在父级设置display：flex；属性之后，块级元素可以在行内展示，并且可以按比例分配父级宽度。

/*下面属性在使用的时候不能添加高度，效果如下图，控制伸缩盒子在垂直轴上的显示*/
align-items: flex-start;
align-items: flex-end;
align-items: center;

align-items: flex-start;

align-items: center;

align-items: flex-end;

/*下面属性在使用的时候宽度设置为固定值如100px，效果如下图，控制伸缩盒子在水平轴上的显示*/
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: flex-start;
justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: flex-start;

justify-content: flex-end;

/*下面属性在设置相同宽高的时候，可以控制伸缩盒是否可以换行，如下图*/
flex-wrap: nowrap;
flex-wrap: wrap;

flex-wrap: nowrap;

flex-wrap: wrap;