弹性布局是做什么用的？我经常遇到元素居中等问题。这时候我就可以使用Flex（FlexibleBox），它为盒模型提供了强大的灵活性。基本概念采用了Flex布局的元素，称为Flex容器，简称“容器”，容器的子元素称为Flex项，简称“项”。二轴：主轴、交叉轴；两轴起始位置：主起点和主终点，交叉起点和交叉终点；属性显示：其他值|弹性|内联柔性；csscolumnsin对flex容器没有影响float、clear和vertical-align对flexitems没有影响属性容器属性属性描述属性flex-direction主轴方向对齐flex-wrap项目包裹效果对齐flex-flowflex-direction和flex-wrap复合属性排列justify-content定义flex项目沿主轴的对齐方式align-items定义容器中子项目沿侧轴的对齐方式align-content对齐flex容器中flex行的对齐方式控制其中的顺序柔性物品出现在它们的柔性容器中。flex-grow定义了当子item的宽度之和小于父元素的宽度时child拉伸的比例区域。flex-shrink定义子项的宽度总和超过父元素的宽度。itemflex-basis的缩放区域定义了子item的初始宽度。如果子项的宽度之和超过了父元素的宽度，则子项按照flex-basis比例进行缩放和对齐。flexflex-grow,flex-shrink,flex-basis缩写区域align-self定义单个子项不同于其他项的对齐方式对齐图形容器属性flex-direction（创建主轴，定义方向项目）弹性方向：行|行反转|栏目|列反转；row（默认值）：在“ltr”排版下从左到右排列；在“rtl”排版下从右到左排列。flex-wrap(物品包装)flex-wrap:nowrap|包装|换行；flex-flow(复合属性)flex-flow:flex-direction||flex-wrapjustify-content(定义灵活项目沿主轴对齐的方法)justify-content:flex-start|弹性端|中心|间隔|空间周围；align-items（定义弹性项目如何在弹性容器当前行的横轴上对齐）align-items:flex-start|弹性端|中心|基线|stretch;align-content（调整flex容器中flex行的对齐方式）align-content:flex-start|弹性端|中心|间隔|环绕空间|拉紧;请注意，该属性对只有一行Item属性的flex容器没有影响order（控制flex项目在其flex容器中出现的顺序）order:[integer]/*传入的整数，默认为0*/flex-grow(当定义子item宽度之和小于父元素宽度时，子item拉伸的比例)flex-grow:[number]//传入数字，默认0flex-shrink(当定义和时childitemwidthsexceedsthewidthoftheparentelement,childitemsScalingratio)flex-shrink:[number]//传入数字，默认1flex-basis(定义子item的初始宽度，如果子项的宽度超过父元素的宽度，子项将按照flex-basis比例缩放）flex-basis:[length]|[百分比]|汽车;/*defaultauto*/flex（flex-grow、flex-shrink、flex-basis的缩写）flex属性是flex-grow、flex-shrink和flex-basis的简写，默认值为01auto。最后两个属性是可选的。align-self(定义单个子项与其他项不同的对齐方式)align-self:auto|弹性启动|弹性端|中心|基线|不再困惑，一次搞定！图解flexbox的十多个属性
