1。什么是Flex布局Flex是flexibleBox的缩写，意为“弹性布局”，用于为盒装模型提供最大的灵活性。任何容器都可以指定为弹性布局。链接参考2.基本概念采用Flex布局的元素称为flex容器，简称“容器”。它的所有子元素自动成为容器的成员，称为弹性项目（flexitem），简称“项目”。容器默认有两个轴：水平主轴和垂直横轴。主轴的起始位置（与边框的交点）称为mainstart，结束位置称为mainend；交叉轴的起始位置称为crossstart，结束位置称为crossend。默认情况下，项目沿主轴排列。单个item占用的主轴空间称为mainsize，占用的横轴空间称为crosssize3。属性container有6个属性：flex-directionflex-wrapjustify-contentalign-itemsflex-flowalign-content3.1flex-directionflex-direction属性决定了item的排列方向flex-direction:row|行反转|栏目|column-reverserow:水平排列row-reverse:水平反转column:垂直column-reverse:垂直反转如何换行flex-wrap:nowrap|包装|wrap-reversenowrap：默认值，不换行wrap：wrap，第一行在上面wrap-reverse：wrap，第一行在下面3.3flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写，默认值为rownowrapflex-flow:rownowrap3.4justify-contentjustify-content属性决定了项目在主轴上的对齐方式justify-content:flex-start|弹性端|中心|间隔|space-aroundflex-start:left-alignedflex:right-alignedcenter:centeredspace-between:两端对齐，项目之间的间距相等space-around:每个项目两边的间距相等。所以项目之间的间距是项目和边框之间的间距的两倍。3.5align-itemsalign-items属性决定项目如何在横轴上对齐align-items:flex-start|弹性端|中心|基线|stretchflex-start：横轴起点对齐（从上到下）flex-end：对齐横轴终点（从下到上）center：对齐横轴中点（中间）baseline:对齐item第一行文本的基线(textbaseline)stretch:(默认值)，如果item没有设置height，或者设置为auto，item会占据容器的整个高度。3.6align-contentalign-content属性定义了多个轴的对齐方式。如果项目只有一个轴，则此属性将不起作用。对齐内容：flex-start|弹性端|中心|间隔|环绕空间|stretchflex-start：与横轴起点对齐flex-end：与横轴终点对齐center：与横轴中点对齐space-between：与横轴对齐两端对齐，并且axesbetweenintervalsareevenlydistributedspace-around：每条轴两边的间隔相等。stretch：默认值，轴占据整个交叉轴4.item属性item有6个属性orderflex-growflex-shrinkflex-basisflexalign-self4.1orderorder属性定义了item的排列顺序。数字越小排列越高，默认为0order:
