弹性布局在项目中的使用
布局的传统解决方案：依赖于display属性+position属性+float属性
2009年弹性布局flex出现了。弹性布局各个知识点都了解了，但属于一听就会一写就废的尴尬境地，写了下面的页面之后感觉对弹性布局了解的更深一点了
头部用 弹性布局
页面：
布局思路：
- 整体头部为一个容器，背景图片填充
- 两个红色框框为容器里的子项目，一个在左一个在右，可以在父元素设置排列方式为justify-content: space-between;左右两边对齐，
- 左边的子项目可以作为一个容器，图片img元素是行内替换元素也可以说是行内块元素，文字一栏可以用dl>dt>dd来写，也可以再设置容器display：inline-flex；这是作为行内块来使用，设置里面的子项目排列顺序是flex-direction: column;
- 左边的容器设置在副轴的排列方式为居中align-items：center；
- 右边的容器和左边类似，图标和密码可以用li来写，li将图片和文字写在一个整体里，还可以根据ui的要求写距离左边和右边的距离
- 右边容器里的内容在副轴的位置ui有要求的话比如距离底部20px的话，将它在副轴的位置align-items：flex-end；设在底部，然后将容器整体设置距离底部的边距。
整体页面用弹性布局
页面：
布局思路：
- 红色为整体父容器，设置内边距paddin：20px；整体用百分比来布局，横向排列（默认），分成三块。
- 黄色的线因为每个模块都有就用section标签来表示，然后给section标签加样式。
- 每个子项目都可以设置成父容器，排列顺序为flex-direction：colum；高度根据涉及图用百分比来表示的
- 关于中间和右边上部分对齐的情况，中间上面设置的高度和右边设置的高度一样，右边加了内边距，为了保证高度一样用box-sizing：border-box；让内边距问题不延伸到外面，建议每个框框都加上，减少布局错乱。
- 中间上方是一个大的容器，大容器的排列顺序是flex-direction：colum；大容器最上方又是一个容器，保证左右两边的排列顺序是两边对齐， justify-content: space-between;
- 页面数字和文字上下排列可以用display：inline-flex；来进行竖向排列。