flex布局实例（一）：一个元素

代码：

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

默认左右横向排列，效果：

屏幕快照 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;
    }

侧轴居中效果：

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

代码：

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

侧轴排列至最后：

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

代码：

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

主轴和侧轴居中效果：

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

代码：
.parent{
display:flex;
justify-content:center;
align-items:flex-end;
}
主轴居中，侧轴最后效果：

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

代码：

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

主轴和侧轴都靠后效果：

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