Flex弹性布局

Flex弹性布局

作为开发小白，写的第一篇博客，记录自己的学习，算是讲义，切勿直接复制粘贴，在写的过程中会忘记中英文切换，避免造成不必要的麻烦；如有问题，欢迎订正。谢谢。
在说Flex弹性布局前，先简单说下传统的布局，在未用弹性布局时，我们会通过用display、float、position等属性来达到效果，还有盒子模型；盒子模型需要提到box-sizing属性：
对于box-sizing属性值做下简单介绍：
content-box：这个属于普通盒子模型，之所以说普通，是因为当我们div这个元素添加padding、border等属性时,这个盒子会变大，向外扩展；（以div为例，div已经给过宽高）
border-box：相比于content-box对于我们的布局更友好，当我们给div这个元素添加padding、border等属性时,这个盒子不会变大，保持原有的大小，向内扩展；（以div为例，div已经给过宽高）

属性值	变化
content-box	盒子变大，向外扩展
border-box	盒子不变，向内扩展

现在开始说Flex弹性布局属性
首先从父元素开始说起：当我们开始使用弹性布局时，display:flex;属性一定要加，对于不同浏览器兼容问题，可以加上display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;解决兼容问题。
对于弹性盒子要说到主轴和交叉轴，后面会说到这个概念，为了有助于理解先贴一张图，主轴和交叉轴像数学里X轴与Y轴。
一、父元素

1. display:flex; 使用弹性布局时，display:flex;属性一定要加，对于不同浏览器兼容问题，可以加上display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;解决兼容问题。

2. justify-content：主轴上的子元素排列方式（该属性作用在主轴上，默认情况下主轴为X轴）；属性值有（该例子主轴为X轴）：
   center：子元素居中显示
   
   space-between：子元素两端对齐显示
   
   space-around：子元素拉手显示（就像小孩在站队一样，手拉手站，最外面的两个小朋友具外围只有一个手臂宽，中间手拉手的部分是两个手臂的宽，说不清楚，还是图解吧！）
   
   flex-start：子元素居左显示；
   
   flex-end：子元素居右显示；
   
   CSS部分：

   .child {
       width: 50px;
       height: 50px;
       background-color: #127078;
       border: 1px solid #111111;
       text-align: center;
       font-size: 20px;
       line-height: 50px;
       color: #ffffff;
   }
   .box {
           width: 300px;
           height: 300px;
           border:1px solid #000000;
           display: flex;
          justify-content: flex-end;
       }
   

   body部分：

<div class&