弹性盒：控制子级元素在父级容器中的排列位置。
属性值：display
属性值：flex
【在弹性盒环境中浮动是不可以使用的，定位和盒模型是可以用的】
【display：flex一定要加在父级容器上】
当前元素形成盒模型后，默认的主轴方向是X轴，侧轴是Y轴（主轴和侧轴不是固定的，可以通过属性来改变）
当前元素中设置了弹性盒，不考虑元素类型，所有的子级元素都可以设置宽高大小，并且可以在同一行显示。
在弹性盒中，要使得单个元素居中的话可以设置margin：auto。很方便。
弹性盒属性：
【添加在父级元素上的，会控制所有的子级；添加在子元素上的，会控制单个子级。】
1、改变默认的主轴方向：flex-direction属性
属性值：row 默认值，主轴方向为x轴
column 改变主轴为y轴。
2、对齐方式：<1>主轴上的对齐方向：justift-content属性
属性值：flex-start 默认值，元素在起始位置，相当于左对齐。
flex-end 向右对齐； center 居中。
space-between 两对对齐，其余空间自动分配；space-around 所有的空间都是自动分配。
space-evenly 所有的间距都是一样的。
<2>侧轴上的对齐方式：align-items属性
属性值：flex-start 默认值，元素在起始位置，相当于上对齐。
flex-end 向下对齐； center 居中。
baseline 基线对齐
【基线对齐】所有的子元素都有宽高的情况下，baseline和flex-start的效果是一样的。当子元素不设置宽高的情况，并且不设置baseline，子级默认拉伸。当前元素都是文本的时候，排列方式以基线对齐。
3、当子元素的宽度综合大于父级元素的时候，默认是不换行，进行挤压，不会掉下去。
换行属性：flex-wrap
属性值：nowrap 不换行。 wrap 换行
4、当设置换行属性时，行与行之前有间距。
属性：align-content
属性值：flex-start
flex-end
space-between
space-around
添加在子元素上的属性，控制单个属性：
1、alingn-self属性，控制子级在侧轴上面的对齐方式。
属性值：flex-start 、flex-end、center、auto（自动）、streth（拉伸）
auto：如果父级有侧轴对齐方式，则继承父级；如果父级没有没有侧轴对齐方式，则默认拉伸。
2、order属性，优先级。属性值是数字，数值越大，则越往后显示，效果类似z-index
3、flex属性，占据主轴剩下的空间，属性值也是数字。常用是1，表示占据主轴剩下的部分，达到自适应的效果。
