2024年9月flex复杂布局（flex布局）
⑴flex复杂布局（flex布局
⑵维布局，一个flex一次只能处理一个维度上的元素布局，一行或者一列。.如果不规定换行，就算是超了，会等比压缩缩小，而不是自动换行，想要换行必须要使用felx-wrap.任何一个容器都可以被指定为flex布局.行内元素可以被指定为inline-flex.设置flex之后，子元素的float,clear，vertical-align.在flex布局中，一个Flex子项的宽度是由元素自身尺寸即flex-basic设置的基础属性，以及外部填充flex-grow,收缩flex-shrink，还有最大，最小尺寸限制这个共同决定的.基础尺寸：flex-basic,box-sizing盒模型共同决定.弹性增长;flex-grow属性，弹性收缩；flex-shirk属性.最小尺寸min-wdith,max-width等css属性，min-content最小内容尺寸,width也属于最小尺寸了.在flex布局中，子项设置width是没有直接效果的.实际设置的width，虽然看起来生效了，但是效果是flex-basic的作用.flex-basic的默认值是auto，也就是完全根据子列表项自身尺寸渲染(min-width》||max-width》width》content-size).是盒模型，元素自身尺寸特性，以及flex属性共同作用的结果。最大最小尺寸限制》弹性收缩，弹性扩张》基础尺寸.所以无论是什么布局min-width,max-width这种属性都拥有绝对权威.如果是数值，比如flex:。chrome里面是flex-basis:%,flex-grow:,flex-shirk:..如果是长度值，比如flex:px。还是chrome，flex-basis:px,flex-grow:,flex-shirk:。.个参数，个参数，以及initial,auto,none这些关键字，没有记的必要，直接分开写的清清楚楚不就好了，非要用一些自己不是很明白的参数在那里瞎搞.flex默认值auto。也就是不放大，等比缩小，用原来的大小.分配固定的家产数量.如果同时设置width，会被忽略，但是max-width，min-width，优先级比flex-basis更高。但是最高不要用这个值，也就是使用宽度直接使用flex-basis就可以，不需要单独给子项固定width，这样会让人很疑惑。甚至根本不需要min-width/max-width这些属性.flex-basic是作用在content-box上的.设置的width+padding+border。如果给他设置box-sizing:border-box:那么宽度会减小，减小的长度是padding-left+padding-right+border*的长度.flex-basis:支持一堆关键字，但是好多都不支持.家产任然后赋予的时候在怎么分。默认是.多余空间不分配.家产剩余不够分的时候怎么分。默认是，空间不足会分配.每一个item固定大小px。只有flex-basis：，其余两属性没有，但是宽度不足，又没有换行的时候，宽度不够，所有都是会一起缩小的，并不是最小宽度，这是因为flex-shirk:默认是.所以属性一定还是设置的.每一个item最小宽度是，多余宽度等扩大，但是要有间距.因为会等比扩大，所以间距要自己设置，这里可以设置padding。还有一个重要的就是background-color的计算和bos-sizing没有关系。所以这里加padding没啥用，背景颜色还是在原来的范围内显示，只是content-box会变化。所以这里要加margin,但是marginzhe这里也有一个坑点，flex布局下不会自动margin折叠，所以不能简单的margin：，这样各个item的间距不一样.flex-direction:决定主轴的方向从左到右非别是.flex-wrap:默认情况下，所有项目都是排在一条线上，就算是超了，默认情况下都是按照:缩小，而不是机灵的自动换行，必须使用这个属性才会自动换.flex-flow:上面那俩属性的合并值。.justify-content:主轴上项目的对齐方式。如果是横向主轴，那么是左右的对齐方式，如果是竖向主轴，那么就是上下的对齐方式.align-items:交叉轴上的对齐方式，也就是上下对齐方式.具体的对齐方式和交叉轴有关系.align-content属性：多跟轴线的对齐方式,如果项目只有一根轴线，这个属性不起作用.order：本来列表是按照实际的渲染顺序来显示的，如果单独给某个属性设置这个值，数字越小，排列越靠前。.flex-grow.flex-shrink.flex-basisalign-self:重点。覆盖align-items属性，允许单个项目和其他有不一样的对齐方式.会覆盖align-items属性。
⑶flex布局，看完这篇都懂了
⑷flex布局开启flex布局display:flex(独占一行)inline-flex(允许换行)应用在flexcontainer上的css属性应用在flexitems上的css属性flexcontainer的属性:justify-content:决定了flexitems在主轴(mainaxis)上的对齐方式flex-start(默认值):与mainstart对齐flex-end:与mainend对齐center:居中对齐space-between:flexitems之间的距离相等.与mainstart,mianend两端对齐space-evenly:flexitems之间的距离相等.item与mianstart,mianend之间的距离等于flexitem之间的距离space-around:flexitems之间的具体相等align-items决定了flexitem在crossaxis上的对齐方式flex-wrap决定了单行还是多行flex-flow是flex-direction||flex-warp的缩写flex-flow:row-reverse等价于flex-direction:row-reverseflex-wrap:nowrapalign-content决定了多行flexitems在crossaxis上的对齐方式,用法和justify-content类似stretch(默认值):与align-items的stretch类似在crossaxis上拉伸flex-start:与crossstart对齐flex-end:与crossend对齐center:居中对齐align-selfflexitems可以通过设置align-self覆盖flexcontainer设置align-itemsauto(默认值):遵从flexcontainer的align-itemsstretch,flex-start,flex-end,center,baseline效果跟align-items一致flex-shrink决定了flexitems如何收缩可以设置任意非负数字(正小数,正整数,),默认值是当flexitems在mainaxis方向上超过了flexcontainer的size,flex-shrink属性才会有效每个flexitem收缩的size为flexitems超出flexcontainer的size*收缩比例/所有flexitems的收缩比例之和收缩比例=flex-shrink*flexitem的basesizebasesize就是flexitem放入flexcontainer之前的sizeflexitems收缩后的最终size不能小于min-widthmin-heightflex-grow决定了flexitems如何扩展可以设置任意非负数字(正小数,正整数,),默认值是放flexcontainer在mainaxis方向上有剩余size时,flex-grow属性才会有效如果所有flexitems的flex-grow综合sum超过,每个flexitem扩展的size为flexcontainer的剩余size*flex-grow/sum如果所有flexitems的flex-grow综合不超过,每个flexitem扩展的size为flexcontainer的剩余size*flex-growflexitems扩展后的最终size不能超过max-widthmax-height举例:flex-direction为row的情况下父容器宽度px有三个子容器宽度均为,flex-grow分别为,,这样可以得出A的宽度=*(/)+=.B的宽度=*(/)+=.C的宽度=*(/)+=若flex-grow分别为.,.,.,则结果为:A的宽度=*.+=B的宽度=*.+=C的宽度=*.+=flex-shrink决定了flexitems如何收缩可以设置任意非负数组(正小数,正整数,),默认值是当flexitems在mainaxis方向上超过了flexcontainer的size,flex-shrink属性才会有效每个flexitem收缩的size为flexitems超出flexcontainer的size*收缩比例/所有flexitems的收缩比例之和收缩比例=flex-shrink*flexitem的basesizebasesize就是flexitem放入flexcontainer之前的sizeflexitem收缩后的最终size不能小于min-widthmin-height举例:总容器宽度px一共六个子视图,宽度分别为,,,,,,shrink为,,,,,,总长度:+++++=总共得收缩的长度:-=收缩比例是flex-shrink*item的主轴方向的sizesum=*+*+*+*+*+*item的收缩比例是*需要收缩的具体为*(*)/sumitem的收缩比例是*需要收缩的具体为*(*)/sumitem的收缩比例是*需要收缩的具体为*(*)/sumitem的收缩比例是*需要收缩的具体为*(*)/sumitem的收缩比例是*需要收缩的具体为*(*)/sumitem的收缩比例是*需要收缩的具体为*(*)/sumflex-basis设置flexitems在mainaxis方向的basesizeauto(默认值)content取决于内容本身的size决定flex-item最终basesize的因素优先级从高到低max-widthmax-heightmin-widthmin-heightflex-basiswidthheight内容本身的sizeflex-basisflex-group联合使用的效果:flex是flex-growflex-shrink?||flex-basis默认值是autonone:auto
⑸布局类型：、浮动+定位、自适应（百分比、响应式布局、弹性布局（flex布局弹性布局的优缺点：、优点：兼容性支持所有浏览器（Webkit内核的浏览器要加上-webkit-，可以随用户的喜好进行调节，可以将任何一个容器指定为Flex布局；、缺点：弹性布局较复杂，需兼容IE；注意：当使用了弹性布局，在css中的float、clear和vertical-align就会失效、flex-direction弹布局方向即容器方向row：默认方向，从左到右row-reverse：从右向左column：从上到下column-reverse：从下到上、flex-wrap换行nowrap：默认不换行wrap：向下换行wrap-reverse：向上换行、flex-flow方向和换行的简写例如，flex-flow：rownowrap；、justify-content容器方向上的对齐方式flex-start：默认向左对齐flex-end：向右对齐center：居中对齐space-between：两端对齐，子元素之间有间隔，子元素与边框之间无间隔space-around：每个子元素两侧的间隔相等。子元素之间的间隔比子元素与容器边框的间隔大一倍、align-items默认垂直容器方向上的对齐方式flex-start：垂直方向的起点对齐flex-end：垂直方向的终点对齐center：垂直方向的中点对齐baseline：与第一个子元素中文字的基线对齐stretch（默认值：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度、align-content子元素两种方向上的对齐flex-start：当容器方向子元素刚好填满时，与垂直方向的起点对齐flex-end：当容器方向子元素刚好填满时，与垂直方向的终点对齐center：当容器方向子元素刚好填满时，与垂直方向的中点对齐space-between：当容器方向子元素刚好填满时，垂直方向两端对齐，子元素之间的等间距间隔space-around：两个方向两侧的间隔都相等。所以轴线之间的间隔比轴线与边框的间隔大一倍stretch（默认值：沾满整个垂直方向、order排序，integer（整数，数值小的在前面、flex-grow放大比例，number，默认值为、flex-shrink缩小比例，number，默认值为注：给所有子元素设置该属性为，当空间不足时，所有子元素将等比例缩小平分所有空间。如果单独给某个子元素设置为，那么该子元素将空间不足时不缩小。、flex-basis属性该属性定义了给子元素分配空间时其占据的空间为多少，可以设置为与其width和height属性一样的值，那么它将被分配固定的空间大小。、flex属性：flex-grow、flex-shrink和flex-basis的简写、align-self属性该属性允许设置过额子元素有与其他子元素不一样的对齐方式，可以覆盖align-items属性auto（默认值：表示默认继承父级的align-items属性flex-start：垂直方向的起点对齐flex-end：垂直方向的终点对齐center：垂直方向的中点对齐baseline：与第一个子元素中文字的基线对齐stretch（默认值：如果子元素没有设置高度或者高度设为auto，那么它将占满整个容器的高度
⑹关于手机端的flex布局
⑺Flex是FlexibleBox的缩写，意为“弹性布局“，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。使用flex布局首先要设置父容器display:flex，然后再设置justify-content:center实现水平居中，最后设置align-items:center实现垂直居中。ex：运行结果：justify-content和align-items是啥？哪里可以看出横向、竖向的语义？是的，flex的确没有那么简单，这就要从两个基本概念说起了。说来也不难，flex的核心的概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴，可以说flex布局的全部特性都构建在这两个概念上。flex布局涉及到个CSS属性（不含display:flex，其中父容器、子容器各个。不过常用的属性只有个，父容器、子容器各个，我们就先从常用的说起吧。首先，我们先说说轴吧，理解了轴，在之后的例子中更更能理解属性。如图所示，轴?包括?主轴?和?交叉轴，我们知道?justify-content?属性决定子容器沿主轴的排列方式，align-items?属性决定子容器沿着交叉轴的排列方式。那么轴本身又是怎样确定的呢？在flex布局中，flex-direction?属性决定主轴的方向，交叉轴的方向由主轴确定。.主轴主轴的起始端由flex-start表示，末尾段由flex-end表示。不同的主轴方向对应的起始端、末尾段的位置也不相同。向右：flex-direction:row向左：flex-direction:row-reverse向下：flex-direction:column向上：flex-direction:column-reverse交叉轴主轴沿逆时针方向旋转°就得到了交叉轴，交叉轴的起始端和末尾段也由flex-start和flex-end表示。上面介绍的几项属性是flex布局中最常用到的部分，一般来说可以满足大多数需求，如果实现复杂的布局还需要深入了解更多的属性。容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。设置子容器沿主轴排列：justify-contentjustify-content属性用于定义如何沿着主轴方向排列子容器。flex-start：起始端对齐，例子：flex-end：尾端端对齐，例子：center居中对齐：space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。设置子容器如何沿交叉轴排列：align-itemsalign-items属性用于定义如何沿着交叉轴方向分配子容器的间距。flex-start：起始端对齐flex-end：末尾端对齐center：居中对齐baseline：基线对齐，这里的baseline默认是指首行文字，即firstbaseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。示例中我蓝色线标出来的为基线stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。（在不给元素设置固定高的情况下在主轴上如何伸缩：flex子容器是有弹性的（flex即弹性，它们会自动填充剩余空间，子容器的伸缩比例由flex属性确定。flex的值可以是无单位数字（如：,,，也可以是有单位数字（如：px，px，px，还可以是none关键字。子容器会按照flex定义的尺寸比例自动伸缩，如果取值为none则不伸缩。虽然flex是多个属性的缩写，允许-个值连用，但通常用个值就可以满足需求，它的全部写法可参考下图。单独设置子容器如何沿交叉轴排列：align-self每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器?align-items?属性完全一致，如果两者同时设置则以子容器的?align-self?属性为准flex-start：起始端对齐flex-end：末尾端对齐center：居中对齐当然，baseline和stretch单独设置子容器的话，也是不受父容器影响的，在这就不举例子了。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
⑻面试：flex弹性盒布局
⑼CSS弹性盒布局的理解：web应用有不同设备尺寸和分辨率，这时需要响应式界面设计来满足复杂的布局需求，Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式，浏览器负责完成实际布局。当布局涉及到不定宽度，分布对齐的场景时，就要优先考虑弹性盒布局。主轴的方向换行属性简写：方向+换行主轴对齐方式交叉轴对齐方式多根轴线对齐方式排列顺序，数值越小，排列越靠前，默认为。项目的放大比例,默认为，即如果存在剩余空间，也不放大。项目的缩小比例,默认为，即如果空间不足，该项目将缩小。项目占据的空间,默认值为auto，即项目的本来大小简写：flex-grow,flex-shrink和flex-basis独立的对齐方式注意：重点理解flex:跟flex:auto的区别，本质上是flex-basis的理解。flexbox在分配剩余空间时，需要计算剩余空间的大小，这依赖于flex-basis。flex:时flex-basis是%，也就是元素就算设置了width也不会起作用，基准宽度为，元素的最终宽度是分配了剩余宽度后得到的尺寸。flex:auto时，flex-basis是auto，基准宽度为元素设置的width，最终宽度等于基准宽度+剩余宽度分配后的宽度。
⑽Flex布局也称弹性布局（flexiblebox模块，主要是为了提供一个更有效的方式对容器之间的各项内容进行布局。弹性布局的主要思想是让容器能根据需要改变项目的宽度和高度，以填满可用空间，满足所有类型的显示设备和屏幕尺寸。因此弹性布局模块的大小是未知或者动态变化的。???采用Flex布局的元素，称为Flex容器（flexcontainer，简称“容器“。它的所有子元素自动成为容器成员，称为Flex项目（flexitem，简称“项目“。Flex布局比较适合用于小规模的布局，比如应用程序中的组件布局。Flex布局容器默认存两条轴：水平主轴（mainaxis和垂直的交叉轴（crossaxis。主轴的开始位置与边框的交叉点叫作mainstart。结束位置叫作mainend；交叉轴的开始位置叫作crossstart，结束位置叫作crossend。项目默认沿主轴排列。.给父元素加上display:flex开始盒子布局row??|??row-reverse??|??column??|??column-reverse（row（默认值：主轴为水平方向，起点在左端。（row-reverse：主轴为水平方向，起点在右端。（column：主轴为垂直方向，起点在上沿。（column-reverse：主轴为垂直方向，起点在下沿。nowrap??|??wrap??|??wrap-reverse（nowrap：不换行（wrap：换行。第一行在上方（wrap-reverse：换行。第一行在下方flex-start??|??flex-end??|??center??|??space-between??|??space-around???（flex-start（默认值：左对齐（flex-end：右对齐（center：居中（space-between：两端对齐，项目之间的间隔都相等（space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍flex-start??|??flex-end??|??center??|??baseline??|??stretch（flex-start：交叉轴的起点对齐（flex-end：交叉轴的终点对齐（center：交叉轴的中点对齐（baseline:项目的第一行文字的基线对齐（stretch（默认值：如果项目未设置高度或设为auto，将占满整个容器的高度auto??|??flex-start??|??flex-end??|??center??|??baseline??|??stretch该属性可取个值，除了auto，其他都与align-items属性完全一致。(完)
⑾【归纳】flex布局
⑿说到flex布局，在我之前的影响中，只知道这是一种较传统布局较方便的布局，这种布局对我来说是全新的。在flex布局出现之前，我们使用的传统布局主要有以下几种：这些传统的布局方式虽然可以满足我们的很多需求，但是也并不方便，比如实现垂直居中。而现在我们就要开始接触flex布局这种新的布局方式了。flex也可称为“弹性布局”，flex布局有以下几个特点：接下来就将对flex布局的几个重要知识点进行归纳。采用flex布局的元素，称为flex容器（flexcontainer。它的所有子元素自动成为容器成员，称为flex项目（flexitem。如上图所示，该flex容器在纵横有两根轴，其中横向的称为主轴（mainaxis，纵向的称为侧轴（crossaxis。主轴的开始位置（与边框的交叉点叫做mainstart，结束位置叫做mainend；交叉轴的开始位置叫做crossstart，结束位置叫做crossend。子元素默认是沿主轴排列的。子元素在主轴方向的宽度叫做mainsize，在侧轴方向的高度叫做crosssize。flexcontainer（flex容器有如下六个属性：该属性主要有以下值：该属性主要有以下值：默认值为rownowrap，可以以如下方法设定该属性：该属性主要有以下值：该属性主要有以下值：该属性主要有以下值：flexitem（子元素有如下六个属性：该属性默认值为。如果所有子元素的flex-grow属性都为，则它们将等分剩余空间（如果有的话。如果一个子元素的flex-grow属性为，其他子元素都为，则前者占据的剩余空间将比其他项多一倍。该属性默认值为。如果所有项目的flex-shrink属性都为，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为，其他项目都为，则空间不足时，前者不缩小。flex-basis属性定义了在分配多余空间之前，子元素占据的主轴空间（mainsize。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来宽度。默认值为auto。可以以如下方式设定该属性：数值越小，排列越靠前，默认为。即不使用父元素决定的对齐方式，自身设定一个对齐方式。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。flex布局可以简便、完整、响应式地实现各种页面布局。下面就简要地记录几个flex布局的技巧如果内容被修剪，需要浏览器显示滚动条，以便查看剩余内容，可以使用over-flow:auto;实现手机上中下布局：以上就是我此次关于flex学习的一些记录。可以看出，这次学习是围绕着阮一峰的一篇关于flex的博客展开的，他的博客对我此次学习flex布局以及此次的flex博客编写起到了一定的帮助。除此之外，我在这里推荐两个关于flex学习的小游戏，寓教于乐，十分有趣。博客原地址：
⒀Flex布局：Flex布局
⒁使用范围：、如果是PC端页面布局，建议使用传统布局、如果是移动端或者不考虑兼容性问题的PC端，建议使用flex弹性布局
⒂flex意为弹性布局，通过给父盒子添加flex属性，来控制子盒子的位置和排列方式，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
⒃在flex布局中，有主轴和侧轴的概念之分，即所谓的行与列，默认的主轴方向是从左往右，默认的侧轴方向是从上往下。flex-direction属性决定主轴的方向，也就是决定着子元素的排列方向，其中，主轴和侧轴是会变化的，就看flex-direction设置谁作为主轴，子元素就会跟着作为主轴的来排列布局。
⒄justify-content属性定义了项目在主轴上的对齐方式，使用前提必须确定好谁是主轴.
⒅默认情况下，子元素都排在一条线上（主轴，flex-wrap属性定义，flex布局中默认是不换行的。意味着随着子元素不断增加，会直接改变子元素的宽高，不断地挤在一行上。
⒆align-items设置侧轴上的子元素的排列方式(单行的)，这个属性是控制子元素在侧轴(默认是y轴)上的排列方式，在子元素为单个元素的时候去使用。
⒇设置子元素在侧轴上的排列方式，并且只能用于子元素出现在换行的情况中，在单行下是没有任何效果的。
⒈flex-flow属性是flex-direction和flex-wrap属性的复合属性
⒉flex布局中子元素也存在着相对应的一些属性
⒊flex属性定义子元素分配剩余空间，用flex来表示占的多少份，默认为针对这个，可以先了解有名的CSS布局圣杯布局以及双飞翼布局,大致的效果为两边盒子固定，中间自适应。使用flex布局来做的话，就是去处理剩余空间的份数。
⒋align-self属性允许单个的子元素与其他子元素不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-item属性，如果没有父元素，则等同于stretch。
⒌order去控制子元素的排列顺序，数值越小的，排列越靠前，默认为
⒍首先给每个子元素设置一个order值，需要调到前面的，单独提出来将order值设小点即可，想要放到后面order值设大点即可。
⒎Flex布局详解（一
⒏Flex布局的特点：、块级布局侧重垂直方向、行内布局侧重水平方向，flex布局是与方向无关的。、flex布局可以实现空间自动分配，自动对齐（flexible：弹性、灵活、flex适用于简单的线性布局，更复杂的布局要交给grid布局图解重点理解和里面都是叫flexitem，包裹和边框叫flexcontainer。其次要注意是主轴方向不一定是横的，也可以是竖的，侧轴也是一样。（、flex-direction常用得属性值有row、row-reverse、column、column-reverse,默认情况下属性值是row。HTMLCSSCSS（、flex-flow其实是flex-direction和flex-wrap两个缩写，其中属性值可以搭配使用。CSSCSS
⒐前端应知应会：flex布局详解
⒑前端应知应会：flex布局详解flex布局可以说是当下前端开发必须学会的一个基本技能，它在面试中的出场率也很高，有必要专门讲解一下。flex布局全称flexiblebox布局模型，是一种比较高效的css布局方案通过设置元素的display属性，改成flex属性来指定对应容器为flex布局。然后它的所有子元素自动成为了容器元素，不脱离文档流的情况下按照flexitem的默认布局规则排列。首先看下容器的属性：、flex-direction决定主轴的方向，默认值是row即横向从左往右的顺序进行排列。其他选项值还有row-reverse、column、column-reverse、flex-wrap它决定了如果轴线排列不下去的话，如何进行换行默认是不进行换行，继续沿着主轴方向放置。其它选项还有：wrap（换行、wrap-reverse（换行、但是位置跟wrap相反、flex-flow它是flex-firection和flex-wrap的简写、justify-content该属性定义了item在主轴上的对齐方式默认值是：flex-start即顺着主轴方向排列对齐其他还有flex-end：逆着主轴方向并从最远处往主轴起点排列center：居中space-between：两端对齐，项目之间间隔相等space-around：每个项目两侧留白距离相等、align-items该属性定义了项目在交叉轴上如何对齐毕竟，每个item的高度不一定完全一样。它的默认值是stretch：即如果item没有设置高度或者是auto，则会占据整个容器的高度其他还有flex-start、flex-end、center、baseline、align-content它跟align-items的区别就是，该属性定义的是多跟轴线的对齐方式该参数有六个可选项：flex-start、flex-end、center、space-between、space-around、stretch这里面要记得的是处于不同轴线上的item不会遮挡，即如果某个轴线上有两个不同高度的item，那么下一个轴线的位置会按照上一条轴线上高度最高的item进行计算。针对item，也有一些属性可以设置、order决定了项目的排列顺序，可以通过设置该属性将对应的item往前排列、flex-grow，决定了item的放大比例，默认为不进行放大。、flex-shrink，定义了item的缩小比例，默认为，如果空间不够的话所有轴线上的item将进行同比缩小，如果为则该item不进行缩小、flex-basis，定义item在轴线上占据的宽度，如果没设置的话，就按item自身的宽度进行分配、align-self。定义item在轴线纵向的排列方式，可以替换掉对应flex容器的align-items属性，为该item设置专门的对齐方式下面再举个例子《!DOCTYPEhtml》《htmllang=“en“》