2024年10月如何设置flex布局（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值设大点即可。
⒃ReactNative之Flex布局
⒄一般使用ReactNative开发App,一般都采用Flex布局，使用这套布局就非常快。Flex简介Flex又叫弹性布局，会把当前组件看做一个容器，他的所有子组件都是他容器中的成员，通过Flex，就能迅速的布局容器中的成员。使用场景：当想快速布局一个组件中所有子组件的时候，可以使用Flex布局
⒅Flex主轴和侧轴Flex中有两个主要的概念：主轴和侧轴主轴与侧轴的关系：相互垂直的。主轴：决定容器中子组件默认的布局方向：水平，垂直侧轴：决定容器中子组件与主轴垂直的布局方向比如主轴水平，那么子组件默认就是水平布局排布，侧轴就是控制子组件在垂直方向的布局
⒆flexDirection属性flexDirection:决定主轴的方向，水平或者垂直，这样子组件就会水平排布或者垂直排布flexDirection共有四个值，在RN中默认为column。
⒇row（默认值：主轴为水平方向，从左向右。依次排列row-reverse：主轴为水平方向，从右向左依次排列column：主轴为垂直方向，默认的排列方式，从上向下排列column-reverse：主轴为垂直方向，从下向上排列
⒈row-reverse
⒉row-reverse.png
⒊column.png
⒋column-reverse
⒌column-reverse.png
⒍flexWrap属性flexWrap:决定子控件在父视图内是否允许多行排列。flexWrap共有两个值，默认为nowrap。
⒎nowrap组件只排列在一行上，可能导致溢出。wrap组件在一行排列不下时，就进行多行排列
⒏nowrap.png
⒐justifyContentjustifyContent:决定子组件在主轴中具体布局，是靠左，还是居中等justifyContent共有五个值，默认为flex-start
⒑flex-start:子组件向主轴起点对齐，如果主轴水平，从左开始，主轴垂直，从上开始。flex-end子组件向主轴终点对齐，如果主轴水平，从右开始，主轴垂直，从下开始。center居中显示，注意：并不是让某一个子组件居中，而是整体有居中效果space-between均匀分配,相邻元素间距离相同。每行第一个组件与行首对齐，每行最后一个组件与行尾对齐。space-around均匀分配,相邻元素间距离相同。每行第一个组件到行首的距离和每行最后一个组件到行尾的距离将会是相邻元素之间距离的一半
⒒效果flex-start
⒓flex-start.png
⒔flex-end.png
⒕center.png
⒖space-between
⒗space-between.png
⒘space-around
⒙space-around.png
⒚alignItemsalignItems:决定子组件在测轴中具体布局一直都没有管过侧轴，如果侧轴垂直，决定子组件在上，还是下，或者居中
⒛alignItems共有四个值，默认为stretch。
flex-start子组件向侧轴起点对齐。flex-end子组件向侧轴终点对齐。center子组件在侧轴居中。stretch子组件在侧轴方向被拉伸到与容器相同的高度或宽度。
效果flex-start
flex-start.png
flex-end.png
center.png
stretch.png
alignSelfalignSelf:自定义自己的侧轴布局，用于一个子组件设置。注意：当某个子组件不想参照默认的alignItems时，可以设置alignSelf，自定义自己的侧轴布局。
alignSelf共有五个值，默认为auto。
auto继承它的父容器的alignItems属性。如果没有父容器则为“stretch“flex-start子组件向侧轴起点对齐。flex-end子组件向侧轴终点对齐。center子组件在侧轴居中。stretch子组件在侧轴方向被拉伸到与容器相同的高度或宽度。
alignSelf.png
flexflex:决定子控件在主轴中占据几等分。flex:任意数字，所有子控件flex相加，自己flex占总共多少，就有多少宽度.
exportdefaultclassReactDemoextendsponent{render(){return(《Viewstyle={styles.rootView}》《Textstyle={}》《/Text》《/View》);}}conststyles=StyleSheet.create({rootView:{backgroundColor:’darkorange’,flex:,flexDirection:’row’,justifyContent:’space-around’,alignItems:’center’},baseTextStyle:{//width:,//height:,fontSize:,textAlign:’center’,marginTop:,},textStyle:{flex:,backgroundColor:’red’,},textStyle:{flex:,backgroundColor:’deepskyblue’,},textStyle:{flex:,backgroundColor:’green’},textStyle:{flex:,backgroundColor:’blue’,}});
弹性盒子flex布局
弹性盒子布局《divstyle=“display:flex;flex-direction:row;justify-content:space-between“》
flex-direction属性
取值：row(默认)|row-reverse|column|column-reverse
用于控制项目排列方向与顺序，默认row，即横向排列，项目排列顺序为正序--；row-reverse同为横向排列，但项目顺序为倒序--。
column与row相反，为纵向排列，项目顺序为正序--，column-reverse同为纵向排列，项目顺序为倒序--。
取值：nowrap(默认)|wrap|wrap-reverse
用于控制项目是否换行，nowrap表示不换行；
举个例子：比如容器宽度为px，容器中有个宽度为px的项目，nowrap情况下，项目会强行等分容器宽度从而不换行，那么项目实际宽度也就只有px了，而非我们自己设置的px。
wrap表示换行，即项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse同样表示换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目紧贴容器顶部，效果与wrap相反。
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为rownowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
justify-content属性
取值：flex-start(默认)|flex-end|center|space-between|space-around|space-evenly;
用于控制项目在横轴的对齐方式，默认flex-start即左对齐，center为居中，对应的flex-end为右对齐。
space-between为左右两端对齐，即左右两侧项目都紧贴容器，且项目之间间距相等。
space-around为项目之间间距为左右两侧项目到容器间距的倍，比较特别的布局，日常使用不太多。
space-evenly为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
**.align-items属性**
取值：flex-start|flex-end|center|baseline|stretch(默认)
用于控制项目在纵轴排列方式，默认stretch即如果项目没设置高度，或高度为auto，则占满整个容器，下面第一张图的项目没设置高度，其余图片中均为px。
flex-start会让项目在纵轴紧贴容器顶部，flex-end与之相反：
center使用最多，自然不会陌生，在纵轴中心位置排列：
baseline比较特殊，它让项目以第一行文字的基线为参照进行排列：
注意，常理来说justify-content与align-items默认分别处理项目横轴，纵轴的对齐方式，但如果我们修改了flex-direction为column，它们处理的轴向会交换，也就是justify-content处理纵轴，align-items处理横轴。.align-content
取值：flex-start|flex-end|center|space-between|space-around|space-evenly|stretch(默认);
用于控制多行项目的对齐方式，如果项目只有一行则不会起作用；默认stretch，即在项目没设置高度，或高度为auto情况下让项目填满整个容器，与align-items类似。注意，如下演示的个项目我均没有设置高度。
flex-start，center，flex-end与align-items属性表现一致：
space-around与justify-content保持一致，即项目之间间距为上下两端项目与容器间距两倍。
space-evenly同理，项目之间间距与项目到容器之间间距相等，space-between为上下两侧项目紧贴容器。
align-content其实也有baseline等其它可用值，表现与上面介绍过的属性一致，只是单行项目或多行项目的区别。介绍完容器属性，简单介绍下项目属性。容器属性是加在容器上的，那么项目属性呢，就是写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思。
取值：默认，用于决定项目排列顺序，数值越小，项目排列越靠前。
取值：默认，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。
假设默认三个项目中前两个个项目都是，最后一个是，最后的项目会沾满剩余所有空间。
假设只有第一个项目默认为，后面两个项目flex-grow均为，那么后两个项目平分剩余空间。
假设第一个项目默认为，第二个项目为flex-grow:，最后一个项目为，则第二个项目在放大时所占空间是最后项目的两倍。
flex-shrink
取值：默认，用于决定项目在空间不足时是否缩小，默认项目都是，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。
但如果某个项目flex-shrink设置为，则即便空间不够，自身也不缩小。
上图中第二个项目flex-shrink为，所以自身不会缩小。
flex-basis
取值：默认auto，用于设置项目宽度，默认auto时，项目会保持默认宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会width属性高，因此会覆盖widtn属性。
上图中先设置了flex-basis属性，后设置了width属性，但宽度依旧以flex-basis属性为准。
取值：默认auto，flex属性是flex-grow，flex-shrink与flex-basis三个属性的简写，用于定义项目放大，缩小与宽度。
该属性有两个快捷键值，分别是auto(auto)等分放大缩小，与none(auto)不放大不缩小。
align-self
取值：auto(默认)|flex-start|flex-end|center|baseline|stretch，表示继承父容器的align-items属性。如果没父元素，则默认stretch。
用于让个别项目拥有与其它项目不同的对齐方式，各值的表现与父容器的align-items属性完全一致。
css基础之flex布局
很多时候跟着书和不系统的视频学习，会发现没有方向，学了很多却不知道自己能够做出什么成绩。学习要有一个清晰的职业学习规划，学习过程中会遇到很多问题，你可以到我们的web学习交流君羊-点击此处，同时准备了基础，进阶学习资料。学友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时讲一些项目实战案例。————————————————.什么是flexflex是FlexibleBox的缩写,意为弹性布局flex布局中把一个元素作为容器，容器中的子元素称为项目可以通过容器的flex属性，设置所有项目的排列样式。也可以通过项目的flex属性，设置指定项目的排列样式。.flex布局的方向flex布局项目的排列方向可以有两个维度，一水平，二垂直项目排列方向称为主轴，与主轴垂直的方向叫交叉轴在每个轴上有两个方向，从左至右，从右到左；从上到下，从下到上。.flex水平布局在水平维度，默认方向是从左至右可以通过?flex-direction：row-reverse设置为从右到左排列效果图：).默认方向,从左至右).反方向.垂直布局效果图：).默认方向，从上到下).反方向.容器内项目换行通过flex-wrap属性，设置项目在容器内是否可以换行，默认不允许换行。不换行的称为单行容器，换行的称为多行容器也可以通过flex-flow属性同时设置容器主轴方向和是否换行（推荐使用效果图：).默认不允许换行，项目被压缩).允许换行，当剩余宽度不足容纳一个项目块时，就换行相关知识：css如何实现边框长度控制功能详细介绍css中的数学表达式calc()关于书籍：需要学习资料的小伙伴们可以加群，点击此处
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布局
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弹性布局基础设置
《!--容器属性--》《!--如果a未开启?flex弹性布局，则内部三个盒子会自上而下排列--》《!--如果a开启?flex弹性布局，则内部三个盒子会自左向右--》《!--justify-content:center;沿着横轴方向变化对其靠左靠右?--》《!--?align-items:center;;?沿着数轴方向变化?对其靠上靠下--》《!--?flex-direction:row;按行排列，，，如果就是row-reverse，内部项目就是cba,顺序反转--》《!--?flex-direction:column;按列排列，，，如果就是column-reverse，内部项目就是cba,顺序反转--》《!--?flex-wrap:nowrap;;如果项目宽度大于容器宽度，那么项目会等分容器宽度，不换行--》《!--?flex-wrap:wrap;;;如果项目宽度大于容器宽度，那么项目会不会等分容器宽度，按照自身宽度排列，，换行--》《!--项目属性?oder,flex,align-self--》《!--flex-grow:;,如果三个盒子都使用了，那么自身设置的宽度大小不起作用，，会按照flex-grow:等分父亲的宽度（用于等宽的设置，--》《!--flex-basis;盒子的起始大，可以设置大小--》《!--flex-shrink;父元素在缩小，，子元素等比例缩小，属性值为的，，就是不可被压缩的--》《!--align-self;子元素在竖轴上?利用这个设置可以改变?父元素指定的位置?center,或者flex-end--》
注：实际使用中一般不说左右上下，而是以start、end的位置来定义和描述排列展示方向
无flex的img标签：
设置img(行内元素)为flex布局:
若设置为nowarp(flex-warp的默认值)，由于默认值flax-basis为auto，因此会对元素进行缩放操作，即缩放至适应盒子的尺寸。而若某个元素无法缩放(例如设置了宽度)则会将溢出。如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。
basis定义了该元素的布局空白（availablespace的基准值。若设定为auto，则会检测该元素(一个felx-item)的宽度并作为basis的值，若未设定宽度，则使用内部元素(如文字、图片等)的宽度作为basis的值。确定各个basis后，则会得出空白部分的大小，如上图中总宽度为px，各个basis均为px，则空白大小为px。而对这px的使用，会通过flex-grow定义。flex-grow定义了元素的放大(沿主轴方向增长尺寸)情况。flex为则不进行拉伸，flex为其余正整数，则会通过计算权重将空白部分摊分给各个元素，如第一个元素为，其余为，则会将*/=px摊分给a，px摊分给b，px摊分给c，试的三个字母各自进行拉伸(只是所处盒子的大小进行拉伸，字母本身不会拉伸变形)。flex-shrink则定义了元素的缩放情况。那么可以把flex元素flex-shrink属性设置为正整数来缩小它所占空间到flex-basis以下。在计算flex元素收缩的大小时，它的最小尺寸也会被考虑进去，就是说实际上flex-shrink属性可能会和flex-grow属性表现的不一致。
flex的对齐主要是指在cross轴上的对齐方式(主轴或者说main轴可以通过定义宽度、flex-growflex-shrinkflex-basis等进行自定义对齐)。这个属性的初始值为stretch，这就是为什么flex元素会默认被拉伸到最高元素的高度。实际上，它们被拉伸来填满flex容器——最高的元素定义了容器的高度。你也可以设置align-items的值为flex-start，使flex元素按flex容器的顶部对齐,flex-end使它们按flex容器的下部对齐,或者center使它们居中对齐.
justify-content属性定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。“)属性用来使元素在主轴方向上对齐，主轴方向是通过flex-direction设置的方向。初始值是flex-start，元素从容器的起始线排列。但是你也可以把值设置为flex-end，从终止线开始排列，或者center，在中间排列.
你也可以把值设置为space-between，把元素排列好之后的剩余空间拿出来，平均分配到元素之间，所以元素之间间隔相等。或者使用space-around，使每个元素的左右空间相等。
在实例中尝试下列justify-content属性的值：
弹性布局可以响应式的实现各种页面布局，所有浏览器都支持。让所有的li在ul当中垂直居中，实现如下：效果如下：接下来再细聊每个属性的特性。任何一个容器都能使用flex布局，这里有一个flex-container的概念。ul即为flex-container，li是容器内的所有单元吧，官方叫项目，flexitem。借官方几句话：容器默认存在两根轴，水平主轴mainaxis和垂直交叉轴crossaxis，主轴开始位置与边框交叉点叫mainstart,结束位置mainend,交叉轴开始位置crossstart,结束为止crossend,项目默认按照主轴排列，单个项目占据的主轴空间叫做mainsize，占据的交叉轴空间叫做crosssize。一、flex-container有个属性、flex-direction:row|row-reverse|column|column-reverse;按顺序展示效果?、flex-wrap:nowrap|wrap|wrap-reverse;更改ul宽度为px后，li宽px，当ul宽度减小小于li总宽度时，设置flex-wrap:nowrap，不换行，项目依然排在一条轴线上，但是宽度缩小。、flex-flow?属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap????flex-flow:rownowrap???==???flex-direction:row;flex-wrap:nowrap;、justify-content:flex-start|flex-end|center|space-between|space-around;定义了项目在主轴上的对齐方式，以上所有图均设置了?justify-content:?space-around；效果依次如下：、align-items:flex-start|flex-end|center|baseline|stretch;该属性定义了项目在交叉轴上的对齐方式??在此属性之前以上的属性案例都是设置align-items：center对齐方式为交叉轴中点对齐如果li未设置高度或为auto，那么项目将充满整个容器高度。、align-content:flex-start|flex-end|center|space-between|space-around|stretch;该属性定义多根轴线的对齐方式，容器内的项目只有一根轴线时，该属性不起作用。我们得调整一下ulli的样式了。调整flex-wrap:wrap;换行出现多条轴容器高度px,项目高度px,设置完align-content:?space-around每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。二、flex-item项目的属性、order：?《integer》数值越小，排列越靠前，默认值为、flex-grow:《number》;定义项目的放大比例，默认为，如果存在剩余空间也不放大。设置为的比的占据的空间多倍，px、flex-shrink:《number》;定义了项目的缩小比例，默认为，即如果空间不足，该项目将缩小，负值无效。该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素，子元素如何缩小自己的宽度的值越大，缩小的越厉害。如果值为，表示不缩减小。、flex-basis:《length》|auto;??flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（mainsize。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。注意单词别打错了，不是basic！！！、flex:none|???有两个快捷值：auto(auto)和none(auto)建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。flex属性用于设置或检索弹性盒模型对象的子元素如何分配空间,flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性。默认值auto?如果元素不是弹性盒模型对象的子元素，则flex属性不起作用。这里有个面试题：当flex：时，其三个属性值是什么？对应的值是多少？flex:;??相当于flex:auto默认三个属性值是auto?；flex-grow、flex-shrink和flex-basis?放大不缩小，按照项目原本大小flex:none;??三个属性值autoflex:?initial;三个属性值aauto默认值、align-self:auto|flex-start|flex-end|center|baseline|stretch|initial|inherit;把li的高度设置去掉，来看这几个属性值的效果。align-self:auto;??align-self:center;?align-self:?initial;?align-self:inherit;?这几个效果没啥差距align-self:auto;默认值。元素继承了它的父容器的align-items属性。如果没有父容器则为“stretch“。align-self:center;?元素位于容器的中心。弹性盒子元素在该行的侧轴（纵轴上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度。align-self:?initial;??设置该属性为它的默认值，等同于?align-self:auto;align-self:inherit;??从父元素继承该属性，等同于align-self:auto;align-self:flex-start；弹性盒子元素的侧轴（纵轴起始位置的边界紧靠住该行的侧轴起始边界align-self:?flex-end;弹性盒子元素的侧轴（纵轴起始位置的边界紧靠住该行的侧轴结束边界元素位于容器的基线上。如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。？？什么是内轴和测轴？？小疑问align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。注意:?InterExplorer和Safari浏览器不支持align-self属性
做html的时候如果img和html不在同级路径可以用（表示在上一级目录下（表示同级当前目录下?（/表示根目录服务器目录下、例如使用字体文件的时候路径//用本地打开的时候会默认在本地的根目录（会在本地根服务器寻找可以把//去掉换成表示在网络服务器中寻找、删除当前行快捷键：shift+ctrl+k称为Flex：容器?它的所有子元素称为：项目主轴是X轴交叉轴是Y轴布局方式分类：①、行内级（单、双行文本垂直居中②、块级布局?③、浮动、定位布局④Flex布局块级元素?display?:?flex;行内元素?display?:?inline-flex;浏览器兼容问题：可以加上内核前缀（display?:-webkit-flex;注意：设为?Flex?布局以后，flex?item的float、clear（浮动、浮动清除和vertical-align属性将失效例：给父盒子加上?display?:?flex;?如果用其他的浏览器可以加上内核主轴是x轴水平方向排列：①、row：水平靠左边开始排序②、row-reverse：水平靠右边开始排序主轴是y轴垂直方向排列：①、column：垂直从上到下开始排序②、column-reverse：垂直从下往上开始排序flex布局默认会在一行导致元素挤压变形①、wrap：换行，第一行在上方②、wrap-reverse：换行，第一行在下方③、nowrap（默认：不换行是flex-direction和flex-wrap的简写形式格式：flex-flow:值；值（顺序可以颠倒①、flex-start（默认值：左对齐（不改变项目顺序②、flex-end：右对齐?（不改变项目顺序③、center：?居中④、space-between：两端对齐，项目之间的间隔都相等，两端紧贴⑤、space-around：中间项目是两侧项目间隔的倍?⑥、space-evenly：项目之间间隔完全相等包括两侧stretch（默认值：如果项目未设置高度或设为auto，将占满整个容器的高度flex-start（默认值：交叉轴起点对齐（贴上方flex-end：交叉轴终点对齐（贴下方center：交叉轴的中点对齐（垂直居中baseline（都有文字的情况可以使用:?项目的第一行文字的基线对齐（项目内文字水平对齐第一行文字①、flex-start：交叉轴起点对齐（贴上方②、flex-end：交叉轴终点对齐（贴下方③、center：与交叉轴的中点对齐（居中④、space-between：多行上下分开间隔均匀⑤、space-around：中间项目是上下项目间隔的倍?⑥、stretch（默认值：项目的高度是auto或者不设置会默认占满交叉轴⑦、space-evenly：项目之间间隔完全相等包括上下