FlexBoxFlexibleBox模型，通常称为flexbox，是一种一维布局模型。flexbox之所以是一维布局，是因为flexbox一次只能处理一个维度的元素布局，一行或者一列。相比之下，另一种二维布局CSSGridLayout可以同时处理行和列的布局。采用Flex布局的元素称为Flex容器（flexcontainer），容器中的子元素称为项（item）。1、容器的概念从容器的角度来看，有两个不变的轴，主轴由flex-direction定义，另一个轴与之垂直。默认定义为：1）从左到右的主轴（mainaxis），主轴的起始位置称为mainstart，结束位置称为mainend2）从上到下的交叉轴(crossaxis)，交叉轴开始的位置称为crossstart，结束的位置称为crossend。相关属性flex-direction：定义主轴的方向。确定容器中项目的排列方向，默认为从左到右的行。column表示容器中的物品沿主轴排列，reverse表示物品沿横轴排列。弹性方向：行|行反转|栏目|column-reverse特别注意：设置flex-direction后，item的排列方向会发生变化。flex-wrap：判断item是否在容器主轴方向包裹，默认不包裹nowrap。reverse意思是反转。弹性包装：nowrap|包装|换行；flex-flow：flex-direction和flex-wrap属性的简写。默认值：行nowrap。弹性流：<弹性方向>||;justify-content：确定容器中的项目在主轴上的对齐方式。默认为左对齐flex-start。证明内容：flex-start|弹性端|中心|间隔|空间周围；/***flex-start（默认）：左对齐。物品堆叠在容器主轴的起点（mainstart）；*flex-end：右对齐。物品堆放在容器的主轴端（mainend）；*center：居中。项目沿主轴居中；*space-between：两端对齐，item之间的间隔相等。*space-around：每一项两边的间距相等。因此，项目之间的间距是项目与边框之间的间距的两倍。**/align-items：确定容器中的item在横轴上的对齐方式。默认为拉伸。对齐项目：flex-start|弹性端|中心|基线|拉紧;/***flex-start：对齐横轴的起点。*flex-end：对齐交叉轴的末端。*center：横轴的中点对齐。*baseline：项目中第一行文本的基线对齐方式。*stretch（默认值）：如果item没有设置高度或者设置为auto，它会占据整个容器的高度。**/align-content：确定内容与容器中item剩余空间在横轴上的对齐方式。默认为拉伸。特别注意：该属性只对设置了flex-wrap:wrap的容器有效，且容器内的元素组成多行。对齐内容：flex-start|弹性端|中心|间隔|环绕空间|拉紧;/***flex-start：与横轴起点对齐。*flex-end：与交叉轴的末端对齐。*center：与横轴的中点对齐。*space-between：与横轴两端对齐，轴与轴之间的间隔均匀分布。*space-around：每个轴两边的间距相等。因此，轴之间的距离是轴与框架之间的距离的两倍。*stretch（默认）：轴填充整个交叉轴。**/2。项目概念项目默认沿主轴排列。单个item占用的主轴空间称为mainsize，单个item占用的crossaxis空间称为crosssize。相关属性order：定义物品在容器主轴方向的排列顺序，值越小排列越高。默认为0。order:;flex-grow:定义item的放大倍数，默认为0，即使容器中有剩余空间，也不会放大。不允许负值。弹性增长：<数字>；/*default0*//***如果所有项的flex-grow属性都为1，它们将平分剩余空间（如果有的话）。*如果一个item的flex-grow属性为2，其他item为1，则前者剩余占用的空间是其他item的两倍。**/flex-shrink：定义容器空间不足时item的收缩比例，默认为1，即容器空间不足时item收缩，item内容包裹。不允许负值。弹性收缩：<数字>；/*default1*//***如果所有item的flex-shrink属性都为1，当空间不足时，都会按比例缩小。*如果一个item的flex-shrink属性为0，其他item为1，前者在空间不足时不会收缩。**/flex-basis：可以理解为设置项目的默认大小。定义项目在分配多余空间之前在主轴上占据的空间。默认为auto，即项目内容大小。弹性基础：<长度>|汽车;/*defaultauto*/如果容器内所有项目的总大小超过容器，不设置wrap会溢出容器：flex:是flex-grow,flex-shrink和flex-basis的简写，默认值为01自动。最后两个属性是可选的。弹性：无|[<'flex-grow'><'flex-shrink'>?||<'flex-basis'>]建议优先使用这个属性，而不是分别写三个单独的属性，因为浏览器会计算相关的值。align-self：用于设置单个item在横轴上的对齐方式，可以覆盖容器的align-items属性，默认为auto。如果值为auto，则计算值是父元素的'align-items'值，否则为指定值。对齐自我：自动|弹性启动|弹性端|中心|基线|拉紧;
