CSS基础布局（弹性盒子flexible)

CSS规则中，display：属性控制将用于控制一个元素内的子元素的布局。

块元素

当display：block时，将子元素设置为块元素，块元素的特征如下：

• 子元素的宽度和高度属性可用

• 子元素的外边距会把其他盒子推开

• 子元素为自动换行并布满一整行

  当display：inline时，子元素设置为内联元素，宽和高都不能设置，且不会将其他元素推开且换行。
  当display：inline-block时，子元素设置为内联块元素，可以设置宽和高，但不会换行和占满一行。

弹性盒子

当display：flexible时，表示为弹性盒子布局。
弹性盒子中子元素的布局方向主轴和交叉轴，子元素将在主轴的方向上进行排列。

如果确定主轴是由属性flex-flow来控制，默认情况下flex-flow:row，也就是设置行，既横向为主轴

当设置flex-flow:col时的布局如下：

flex-flow是一个组合属性，还可以传入一个值wrap。当设置子元素为定宽时，可能会导致溢出，设置flew-flow:row wrap，就可以使子元素在溢出时自动换行。

设置子元素的尺寸时，由flex:100px这个属性控制，也可以设置某个子元素的尺寸为动态尺寸，flex:2代表设置这个子元素的尺寸占总比例的两份。

还有两个比较重要的属性，控制子元素的居中：
justify-content:center 主轴方向的居中
align-items:center 交叉轴方向居中