在网上学习了flex布局，决定自己总结一下用法。
容器属性：
想要实现flex布局，前提是设置容器的display为flex，这样就可以使用flex的属性进行布局了。flex布局基于主轴和交叉轴，元素根据主轴和交叉轴进行相应的排列。
属性1：flex-direction：设置主轴的方向，默认值是row，即根据水平轴从左至右排列元素；可选值：colum、row-reverse、column-reverse分别对应↓、←、↑。
属性2：flex-wrap：设置排列的元素超出容器宽度时是否换行，默认值是nowrap（不换行）；可选值：wrap（换行），wrap-revers（反向换行）。
属性3：justify-content：设置元素在主轴上的排列方式，默认值是flex-start（从主轴的起始点开始排列）；可选值：flex-end：从主轴的末尾开始排列；center：根据主轴居中排列；space-between：元素平均分布在主轴上，头尾不留间隙；space-around：元素位于各行之前、之间、之后都留有空白的容器内，头尾有二分之一间隙；initial：该关键字用于设置 CSS 属性为它的默认值，css里该关键字通用；inherit：根据父元素继承该属性，css里该关键字通用；space-evenly：平均分配元素，元素间的间隙相同（在移动端ios中正常安卓手机不兼容）。
属性4：align-item；属性5：align-content；属性4可以和属性5一起解释一下，因为两个属性容易混淆。
属性4适用于单行，指定了每一行内items相对彼此自身在交叉轴上的对齐方式。默认值是stretch：元素会被拉伸以适应容器，如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制；center：元素位于容器的中心，弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）；flex-start：元素位于容器交叉轴的开头，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界；flex-end：元素位于容器交叉轴结尾，弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界；baseline：元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐；initial：设置该属性为它的默认值；inherit：从父元素继承该属性。
属性5只有在内部元素多行的条件下才有效（flex-wrap:wrap），因为默认情况，使用属性4可以调整元素整块的排布，元素与元素之间会存在一定的间距，设置该属性可以对多行的元素进行排列，消除这些间距。即在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）进行的操作，设置后属性4不再起影响。默认值是stretch：默认值。元素被拉伸以适应容器。各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸；center：元素位于容器的中心。各行向弹性盒容器的中间位置堆叠。各行两两紧靠住同时在弹性盒容器中居中对齐，保持弹性盒容器的侧轴起始内容边界和第一行之间的距离与该容器的侧轴结束内容边界与第最后一行之间的距离相等。（如果剩下的空间是负数，则各行会向两个方向溢出的相等距离。）；flex-start：元素位于容器交叉轴开头。各行向弹性盒容器的起始位置堆叠。弹性盒容器中第一行的侧轴起始边界紧靠住该弹性盒容器的侧轴起始边界，之后的每一行都紧靠住前面一行；flex-end：元素位于容器交叉轴结尾。各行向弹性盒容器的结束位置堆叠。弹性盒容器中最后一行的侧轴起结束界紧靠住该弹性盒容器的侧轴结束边界，之后的每一行都紧靠住前面一行。space-between：元素位于各行之间留有空白的容器内。各行在弹性盒容器中平均分布。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'flex-start'。在其它情况下，第一行的侧轴起始边界紧靠住弹性盒容器的侧轴起始内容边界，最后一行的侧轴结束边界紧靠住弹性盒容器的侧轴结束内容边界，剩余的行则按一定方式在弹性盒窗口中排列，以保持两两之间的空间相等；space-around：元素位于各行之前、之间、之后都留有空白的容器内。各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。如果剩余的空间是负数或弹性盒容器中只有一行，该值等效于'center'。在其它情况下，各行会按一定方式在弹性盒容器中排列，以保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半；initial：设置该属性为它的默认值；inherit：从父元素继承该属性。
元素属性：
属性1：order：可以设置dom中元素的排列顺序，例如对dom中第一个元素设置order为2，dom中第二个元素设置order为1，则页面显示时第二个元素会在第一个元素前面；如果order的值相同，则元素按照dom中的排列顺序排列。
属性2：flex-grow：当元素宽度之和小于容器宽度时，用于分配元素在容器中占据剩余宽度的占比，如果元素未设置宽高，设置该属性后默认占满盒子全部，默认为0。
属性3：flex-shrink：当元素宽度之和大于容器宽度时，用于收缩元素在容器中占比，计算方式为：元素宽度之和减去容器宽度得到多出来的宽度，乘以flex-shrink的缩放比例，乘以该元素的宽度，再除以总权重（每个元素的宽度乘以每个元素的缩放比例之和），得到该元素的缩放尺寸，默认为1。
属性4：flex-basis：该属性用来设置元素的宽度，优先级大于width。width=0---完全没显示；flex-basis=0---根据内容撑开宽度；width非0，flex-basis也非0---flex-basis优先级高；flex-basis为auto，width非0，则由width决定，width为0，则由内容撑开。
属性5：flex：该属性为集合属性=flex-grow + flex-shrink + flex-basis，flex：1=flex：1 1 0%；flex：auto=flex：1 1 auto；flex：none=flex：0 0 auto；（常用于固定尺寸，不伸缩）
属性6：align-self：设置某一元素在交叉轴的对齐方式，1、值与align-items相同；2、可覆盖容器的align-items属性；3、默认值为auto，表示继承父元素的align-items属性；可选值与align-item相同。