CSS布局之弹性盒子

一、简介

弹性盒子介绍

• 弹性盒子（Flex Box）：CSS3的一种新的布局模式；通过调整其内元素的宽高，在任何显示设备上实现对可用显示空间的最佳填充。
• 应用场景：主要适用于应用程序的组件及小规模的布局。
• 对弹性盒子无效的属性：多栏布局的column-*，浮动的float和clear，垂直对齐vertical-align。
• 兼容性：IE9-不支持；IE10、Safari6.0（IOS1）-和Android4.3-支持的是一个与现有版本规范不兼容的旧版草案；Firefox22-需要修改about:config的layout.css.flexbox.enabled为true；Opera15-16、Safari6.1-、Chrome21-需要前缀-webkit-。

基本术语

• 弹性容器（flex container）：设置display:flex或display:inline-flex的元素。
• 弹性项目（flex item）：弹性容器的所有在文档流中的子元素都被称为弹性项目，弹性容器直接包含的文本被包覆成匿名弹性单元。定位元素和后代元素都不是弹性项目，但浮动元素是。
• 轴（axis）：弹性项目沿其依次排列的那根轴，称为主轴（main axis）；垂直于主轴的轴，称为侧轴或交叉轴（cross axis）。
• 方向（direction）：主轴的起点为main start，终点为main end；交叉轴的起点为cross start，终点为cross end。
• 尺寸（size）：单个项目占据的主轴空间为main size，占据的交叉轴空间为cross size。
• 行（line）：弹性项目可以排布在单个行或多个行中。

flexbox

二、项目排布

在主轴上的排列方向

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

• 默认值是row，表示主轴为水平方向，项目从左到右排列；row-reverse从右到左。
• column表示主轴是垂直方向，项目从上到下排列；column-reverse从下到上。

换行

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

• 默认值是nowrap，表示单行显示。
• wrap表示正向换行，首行在上（主轴水平）或首列在左（主轴垂直）；wrap-reverse相反。

排列顺序

order: <int>;

• 默认值为0。
• 值较大的项目，排在后面。

属性简写

flex-flow: <flex-direction> || <flex-wrap>;

三、项目对齐

主轴上各项的对齐方式

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

• 类似text-align。
• 默认值是flex-start，表示主轴起点对齐；flex-end是主轴终点对齐。
• center是居中对齐，space-between是两端对齐；space-around表示均匀分布，两端是空格。

交叉轴上各项的对齐方式

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

• 类似vertical-align。
• 默认值是stretch，如果项目未设置高或设置为auto，那么项目将充满交叉轴空间。
• flex-start是交叉轴起点对齐，flex-end是交叉轴终点对齐。
• center是居中对齐，baseline是首行文字的基线对齐。

单个项目在交叉轴上的对齐方式

align-self: auto | stretch | flex-start | flex-end | center | baseline;

• 默认值是auto，表示根据align-items来定。
• 其他值参考align-items。

多根主轴的对齐方式

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

• 默认值是stretch，表示各行会充满交叉轴的剩余空间，各行所占空间相等。
• flex-start、flex-end、center参考align-items；
• space-between、space-around参考justify-content。
• 此属性只应用于有多根主轴（多行），且容器有剩余空间的情况。

四、空间分配

项目初始主轴尺寸

flex-basis: <width> | auto | content;

• 默认值为auto，即项目本来的宽（主轴水平）或高（主轴垂直）。
• auto曾被main-size代替，但后来又改回来了。
• content是新增的值，表示根据项目内容自动调整尺寸。

项目的放大系数

flex-grow: <num> | inherit;

• 当容器有剩余空间时，根据<num>来给项目分配剩余空间。
• 默认值为0，表示有剩余空间也不放大项目。
• 项目的最终尺寸 = <flex-basis> + <flex-grow> / SUM(<flex-grow>) * 剩余空间。

项目的缩小系数

flex-shrink: <num> | inherit;

• 当容器空间不足时，根据<num>来决定项目的缩小比例。
• 默认为1，即空间不足时将缩小项目。
• 项目的最终尺寸 = <flex-basis> + <flex-shrink> / SUM(<flex-shrink>) * 缺乏空间（负值）。

属性简写

flex: <flex-grow-num> | <flex-basis-width> | auto | none | initial | inherit; /*单值语法*/
flex: <flex-grow> [ <flex-shrink>? || <flex-basis> ]; /*多值语法*/

• 默认值为initial，相当于0 1 auto（有一段时间为0 1 main-size）。
• auto相当于1 1 auto（有一段时间为1 1 main-size）；
• none相当于0 0 auto（有一段时间为0 0 main-size）。

示例

两栏自适应

• HTML主体代码：

  <div class="parent">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
  

• CSS代码：

  .parent {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
  }
  .left {width:200px;}
  .right {
    -webkit-flex: auto; /* 或-webkit-flex-flow:1 */
    flex: auto; /* 或flex-grow:1 */
  }
  

圣杯布局

• HTML主体代码：

  <header>页眉</header>
  <div id="main">
    <article>内容</article>
    <nav>导航</nav>
    <aside>侧边栏</aside>
  </div>
  <footer>页脚</footer>
  

• CSS代码（省略了margin、border等属性）：

  #main {
    min-height: 800px;
    display:-webkit-flex; display:flex;
    -webkit-flex-flow:row; flex-flow:row;
  }
  #main > article {
    -webkit-flex:3 1 60%; flex:3 1 60%;
    -webkit-order:2; order:2;
  }
  #main > nav {
    -webkit-flex:1 6 20%;flex:1 6 20%;
    -webkit-order:1; order:1;
  }
  #main > aside {
    -webkit-flex:1 6 20%; flex:1 6 20%;
    -webkit-order:3; order:3;
  }
  header, footer {display:block; min-height:100px;}
  /* 视窗窄到容不下三栏 */
  @media all and (max-width: 640px) {
    #main, #page {-webkit-flex-flow:column; flex-direction:column;}
    /* 恢复到文档内的自然顺序 */
    #main>article, #main>nav, #main>aside {-webkit-order:0; order:0;}  
    #main>nav, #main>aside, header, footer {min-height:50px; max-height:50px;}
  }
  

参考1：MDN弹性盒子指南
参考2：阮一峰的flex教程-语法篇，阮一峰的flex教程-实例篇
参考3：各浏览器对弹性盒子的实现中的bug