代碼：

.parent{
      display:flex;
      justify-content:flex-start;
      align-items:flex-start;
    }

默認(rèn)左右橫向排列，效果：

屏幕快照 2017-05-14 下午4.23.31.png

代碼：

.parent{
      display:flex;
      justify-content:center;
    }

主軸方向居中，效果：

屏幕快照 2017-05-14 下午4.25.38.png

代碼：

.parent{
      display:flex;
      justify-content:flex-end;
    }

主軸方向靠右排列，效果：

屏幕快照 2017-05-14 下午4.28.49.png

代碼：

.parent{
      display:flex;
      align-items:center;
    }

側(cè)軸居中效果：

屏幕快照 2017-05-14 下午4.30.45.png

代碼：

.parent{
      display:flex;
      align-items:flex-end;
    }

側(cè)軸排列至最后：

屏幕快照 2017-05-14 下午4.32.43.png

代碼：

.parent{
      display:flex;
      justify-content:center;
      align-items:center;
    }

主軸和側(cè)軸居中效果：

屏幕快照 2017-05-14 下午4.34.58.png

代碼：
.parent{
display:flex;
justify-content:center;
align-items:flex-end;
}
主軸居中，側(cè)軸最后效果：

屏幕快照 2017-05-14 下午4.38.57.png

代碼：

.parent{
      display:flex;
      justify-content:flex-end;
      align-items:flex-end;
    }

主軸和側(cè)軸都靠后效果：

屏幕快照 2017-05-14 下午4.41.04.png