一、flex弹性盒子的基本运用
1、什么是弹性盒子？
弹性盒子顾名思义：具有一定的弹性，也就是可以满足在不同
屏幕大小设备上自适应。
2、弹性盒子的组成？
弹性盒子由弹性容器和弹性子元素组成，一个盒子里可以有一个或者
多个子元素组成
3、如何实现？
当某个div属性中有display：flex时，此时该div即为弹性容器
默认的方向是从左自右，方向可以进行修改。
在body属性中设置direction(rtl,ltr)，此时整体的容器都是从
设置的方向开始的。
4、弹性盒子中常用的几个属性？
4.1 flex-direction属性：指定子元素在容器中的位置(反转排列方向，意味着头尾位置也进行了对换)
row：从（左到右）排列
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
①row效果
②row-reverse效果
③column效果
4.2justify-content属性：弹性项沿着弹性容器的主轴线（main axis）对齐
flex-start：弹性项目向行头紧挨着填充
flex-end:弹性项目向行尾紧挨着填充
center:弹性项目居中紧挨着填充
space-between:弹性项目平均分布在该行上
space-around:弹性项目平均分布在该行上，两边留有一半的间隔空间
4.3align-items属性：设置或检索弹性盒子元素在侧轴（X轴）方向上的对齐方式
flex-start：弹性盒子元素的侧轴（X轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end：弹性盒子元素的侧轴（X轴）起始位置的边界紧靠住该行的侧轴结束边界
center： 弹性盒子元素在该行的侧轴（X轴）上居中放置
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效
stretch：子元素会拉升至和父元素差不多高度或者是宽度
4.4flex-wrap属性：用于指定弹性盒子的子元素换行方式
nowrap：默认排列
wrap：弹性容器为多行，全部子元素超过长度溢出，溢出子元素将会在新的一行开始
wrap-reverse：反转 wrap 排列
4.5align-content属性：用于修改 flex-wrap 属性的行为。
类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐
stretch - 默认。各行将会伸展以占用剩余的空间。
flex-start - 各行向弹性盒容器的起始位置堆叠。
flex-end - 各行向弹性盒容器的结束位置堆叠。
center -各行向弹性盒容器的中间位置堆叠。
space-between -各行在弹性盒容器中平均分布。
pace-around - 各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半
4.6align-self属性：用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式
auto：如果’align-self’的值为’auto’，则其计算值为元素的父元素的’align-items’值，如果其没有父元素，则计算值为’stretch’。
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
lex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。
4.7flex属性：用于指定弹性子元素如何分配空间
auto: 计算值为 1 1 auto
initial: 计算值为 0 1 auto
none：计算值为 0 0 auto
inherit：从父元素继承
[ flex-grow ]：定义弹性盒子元素的扩展比率。
[ flex-shrink ]：定义弹性盒子元素的收缩比率。
[ flex-basis ]：定义弹性盒子元素的默认基准值。
5、对齐方式
设置margin：auto水平垂直居中