Flex布局与缩放计算

时间：2023-04-05 02:01:16 HTML5

一、Flex布局介绍Flex是FlexibleBox的缩写，意为“弹性布局”，用于为盒模型提供最大的灵活性。任何容器都可以指定为flex布局，即内联元素也可以设置为flex布局。//将块级元素div设置为flex布局div{display:flex;}//将内联元素span设置为flex布局span{display:flex;}具有flex布局的元素称为flex容器。简称“容器”。它的所有子元素都会自动成为称为弹性项目或简称为“项目”的容器的成员。2、Flex布局的默认特性默认情况下，容器中的所有子元素都会水平排列，类似于强制左浮动，所以容器子元素的float和clear属性会失效。同时，子元素在容器中的对齐方式将不受vertical-align的控制，即vertical-align也会失效。红色

blue

绿色内容较多

①如果容器没有设置垂直对齐方式，也没有设置容器子元素的高度，那么容器子元素元素的高度与容器的高度相同。如上，容器中所有子元素的高度都会变成300px。②默认情况下，容器下子元素的宽度不会自动放大，即默认显示元素本身的实际宽度。如图：③默认情况下，容器下子元素的宽度可以缩小。当容器中所有子元素的宽度之和超过容器的宽度时，显示默认不会换行，所以容器需要减小元素的宽度，以保证容器可以容纳所有子元素元素。但是容器子元素的宽度并不是无限缩小的，也就是一直缩小到不能缩小为止。.item-1{width:200px;}.item-2{width:8800px;}.item-3{width:8800px;}比如上面item2和item3的宽度设置为8800px，所有的宽度容器中的子元素为17800px，远远超出了容器的宽度800px，所以容器中的所有子元素都必须按比例压缩，item1元素的宽度应为200-191.01=8.99px，最小item1被压缩到存储一个word需要的宽度，刚好等于字体的大小，也就是20px，所以item1的宽度会变成20px。④默认情况下，容器中的子元素可以压缩到最小，但是当所有的子元素压缩到最小后放不下时，就会将子元素放到容器外。⑤如果给容器加上垂直对齐，容器内所有子元素的高度都会变成实际高度，不会等于容器的高度。#main{宽度：800px;高度：300px；显示：弹性；字体大小：20px；背景：红色；有两个轴：水平主轴和垂直交叉轴。主要是设置容器的主轴方向，超过容器后是否包裹显示，水平对齐方式，垂直对齐方式。①flex-direction：用于设置主轴方向，默认值为row，即容器内所有子元素水平排列。column：表示容器中的所有子元素都是垂直排列的。row-reverse：反转容器中所有子元素的顺序，起点在右，即右对齐。column-reverse：反转容器中所有子元素的顺序，起点较低，即与容器底部对齐。②flex-wrap：用于设置当容器中的子元素放不下时是否进行换行。默认值是nowrap，即没有换行符，即使它放不下。wrap：表示可以包裹。当设置为wrap时，容器中的元素不会被压缩，而是换行显示。#main{宽度：800px;高度：300px；显示：弹性；背景：红色；弹性包装：包装；/*放不下的时候可以换行*/font-size:20px;}.item-1{width:300px;}.item-2{width:300px;}.item-3{width:300px;}wrap-reverse：表示行的顺序在换行后反转。wrap:wrap-reverse:③flex-flow：是flex-direction属性和flex-wrap属性的缩写形式。默认值为rownowrap，即主轴在水平方向不换行。④justify-content：用于设置主轴方向的对齐方式。⑤align-items：用于设置item在横轴（非主轴）上的对齐方式。4.容器中元素（item）属性设置①order：用于设置容器元素的排列顺序，默认值为0，值越小排列越高。.item-2{顺序：-1；/*设置item-2的顺序为-1，这样item-2可以放在前面*/}②flex-grow：用于设置容器元素的放大比例，默认值为0，即就是，如果还有剩余空间，就不会放大。③flex-shrink：用于设置容器元素的缩小比例，默认值为1，即空间不足时，item会收缩。④flex-basis：用于设置容器元素的大小，默认值为auto，与容器元素的实际大小一致。缩放时会根据这个值计算是否有额外的缩放空间。⑤flex：flex-grow、flex-shrink、flex-basis的简写，默认值为01auto，即不能放大或缩小，大小与容器元素的大小一致。最后两个属性是可选的。.item-2{flex:01auto;/*注意三个值之间有空格，不是逗号*/}⑥align-self：用于单独设置一个容器元素的对齐方式，默认值为auto，表示继承父元素的对齐方式。.item-2{align-self:center;/*单独设置item-2居中对齐*/}五、felx:1与flex:auto的区别由上可知，flex默认值为01auto。flex的值比较灵活，可以设置多种值，比如：①none：此时等于00auto。.item{flex:无;//值为none}//等同于.item{flex-grow:0;伸缩收缩：0；flex-basis:auto;}②auto:此时等于11auto。.item{flex:auto;//值为auto}//相当于.item{flex-grow:1;伸缩收缩：1；flex-basis:auto;}③一个非负数：这个非负负数是指flex-grow的值，flex-shrink使用默认值1，但是flex-basis的值为0%，如：.item{flex:1;//值为非负数}//等价于.item{flex-grow:1;伸缩收缩：1；弹性基础：0%；/*这里是特殊的0%*/}④值为两个非负数：此时分别代表flex-grow和flex-shrink的值，flex-basis的值为0%。.item{flex:68;//value是两个非负数}//相当于.item{flex-grow:6;收缩：8；弹性基础：0%；/*这里是特殊的0%*/}⑤一个长度或者百分比：此时这个值为flex-basis的值，flex-grow为1，flex-shrink为1.item{flex:200px;//值为一个像素值}//相当于.item{flex-grow:1;伸缩收缩：1；flex-basis:200px;}.item{flex:100%;//取值为百分比}//相当于.item{flex-grow:1;伸缩收缩：1；flex-basis:100%;}需要注意的是，如果flex-basis设置为百分比，那么它是相对于容器大小的百分比，而不是本身占大小的百分比。由上可知，当flex的值为none或auto或未设置时，flex-basis的值为auto；在其他情况下，比如当flex的值为一个数字时，flex-basis的值为0%。所以flex:1和flex:auto的区别就是flex-basis的值不一样。当flex:1时，flex-basis的值为0%；当flex:auto时，flex-basis的值为auto。6、容器元素放大或缩小值的计算①放大情况主要是根据flex-basis的值计算容器内是否还有剩余空间。如果还有剩余空间，并且容器中的某个子元素可以放大，则使用该子元素的flex-grow值与容器中所有子元素的flex-grow值之和进行比较，计算出容器子元素的放大倍数，再乘以剩余空间的大小就是容器子元素需要放大的像素值。#main{宽度：800px;高度：300px；显示：弹性；背景：红色；字体大小：20px;}.item-1{宽度：200px;flex:21auto;}.item-2{width:200px;flex:3110%;/*这里的flex-basis值相当于80px*/}.item-3{width:100px;flex:01220px;}itme-1的flex-basis为auto，所以取值与元素本身的大小相同，即200px；item-2的flex-basis为10%，相对于容器本身的大小，即800px*10%=80px；item-3的flex-basis是设置的220px，需要注意的是虽然设置了width为100px，但是width不会有任何影响，仍然会以flex-basis为基准。先根据flex-basis=800px-(200px+80px+220px)=300px计算剩余空间；因为剩余空间是300px>0，容器中的子元素可以放大，并且因为item-3的flex-grow值为0，所以item-3不会放大，依然会以220px显示.item-1的放大值=2/(2+3)*300px=120px；item-2的放大值=3/(2+3)*300px=180px；所以，item-1的最终大小=200px+120px=320px；item-2的大小=80px+180px=260px；item-3的大小=220px；②收缩的情况收缩的情况也是根据flex-basis的值来计算容器超出容器多少空间，但是并不简单缩放比例是根据flex-shrink的值来计算的，但是容器中某个元素的flex-basis值乘以flex-shrink的值等于容器中所有子元素的flex-basis乘以flex-shrink的值并计算缩放因子。#main{宽度：800px;高度：300px；显示：弹性；背景：红色；字体大小：20px;}.item-1{宽度：200px;flex:02auto;}.item-2{width:200px;flex:03100%;/*这里的flex-basis值相当于800px*/}.item-3{width:100px;flex:00200px;}itme-1的flex-basis为auto，所以取值与元素本身的大小相同，即200px；item-2的flex-basis为100%，相对于容器本身的大小，即800px*100%=800px；item-3的flex-basis是设置的200px，需要注意的是虽然设置了width为100px，但是width不会有任何影响，仍然会以flex-basis为基准。先根据flex-basis=(200px+800px+200px)-800px=400px计算多余空间；由于多余的空间是400px>0，所以容器中的子元素需要缩小，因为item-3的flex-shrink值为0，所以item-3不会缩小，依然以200px显示。item-1的缩减值=(2200px/(2200px+3800px+0200px))*400px=57.14px；item-2的减少值=(3800px/(2200px+3800px+0200px))*400px=342.86px；因此，最终的item-1大小=200px-57.14px=142.86px；项目2大小=800px-342.86px=457.14px；项目3大小=200px；

上一篇：前端面试日常3+1——Day114

下一篇：3D城市你要静静的学起来，然后让大家惊叹不已（3）

Flex布局与缩放计算相关文章