• flex-flow

  
  

让弹性盒的元素以相反的顺序显示，且在必要的时候进行拆行：
display:flex;
flex-flow:row-reverse wrap;

• flex-direction

  
  

设置 <div> 元素内弹性盒元素的方向为相反的顺序：
div
{
display:flex;
flex-direction:row-reverse;
}

• flex-wrap

  
  

让弹性盒元素在必要的时候拆行：
display:flex;flex-wrap: wrap;

• justify-content

  
  

在弹性盒对象的 <div> 元素中的各项周围留有空白：
div{    display: flex;    justify-content: space-around;}

• align-items

  
  

居中对齐弹性盒的各项 <div> 元素：
div{    display: flex;    align-items:center;}

• align-content

  
  

对齐弹性盒的 <div> 元素的各项：
div{    display: flex;    flex-flow: row wrap;    align-content:space-around;}

• order

  
  

设置弹性盒对象元素的顺序：
div#myRedDIV {order:2;}
div#myBlueDIV {order:4;}
div#myGreenDIV {order:3;}
div#myPinkDIV {order:1;}

• flex-grow

  
  

让第二个元素的宽度为其他元素的三倍：
div:nth-of-type(1) {flex-grow: 1;}div:nth-of-type(2) {flex-grow: 3;}div:nth-of-type(3) {flex-grow: 1;}

• flex-shrink

  
  

A, B, C 设置 flex-shrink:1， D , E 设置为 flex-shrink:2：

• 
  

• flex-basis
• 
  

设置第二个弹性盒元素的初始长度为 80 像素：
div:nth-of-type(2) {flex-basis: 80px;}

• flex
• 
  

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

• align-self
• 
  

居中对齐弹性对象元素内的某个项：
#myBlueDiv{    align-self:center;}