当前位置: 首页 > Web前端 > CSS

flex-grow、flex-shrink、flex-basis和九宫格布局理解

时间:2023-03-31 00:10:32 CSS

1.flex-grow、flex-shrink、flex-basis属性flex-grow:定义剩余空间的划分。默认为0,即如果有剩余空间,则不放大。flex-shrink:定义item的收缩比例。flex-shrink默认值为1,flex-shrink值为0不缩放。flex-basis:定义item占据的主轴空间。浏览器根据这个属性计算出主轴上多余空间或不足空间的大小。它的默认值为auto,即项目的原始大小。flex-basis的优先级高于width属性。如果只设置了width属性,flex-basis为auto,则项目的原始长度等于宽度。如果width和flex-basis都设置了,item的原始长度等于flex。-基础。示例:HTML代码:123456789

123456789
123456789
CSS代码:.flex-attr{margin-bottom:600px;宽度:580px;显示:flex;}.item-1{宽度:100px;弹性增长:1;flex-shrink:1;}.item-2{宽度:100px;弹性增长:2;flex-shrink:2;}.??item-3{width:200px;}.pink{background-color:pink;}.skyblue{background-color:skyblue;}.gray{background-color:gray;}当父元素div.flex-attr的宽度大于三个子元素的宽度时,三个子元素的宽度将被放大。因为第三个子元素的flex-grow默认为0,不放大,所以只放大了前两个子元素的宽度,放大比例为1:2。在此示例中,父元素的宽度设置为580px。通过计算,父元素的宽度比三个子元素多了180px。根据缩放比例,div.item-1的宽度放大了180(1/3)=60px,div.item-2的宽度放大了180(2/3)=120px。因此三个子元素最终的宽度分别为160px、220px、200px,如下图所示:当父元素div.flex-attr的宽度小于三个子元素时,三个子元素的宽度子元素缩小。缩小比例为:子元素的宽度比例*flex-shrink属性的比例。例如:三个子元素的宽度比例为1:1:2,flex-shrink属性的比例为1:2:1(第三个子元素的flex-shrink默认为1),则缩小比例是1:2:2。在此示例中,父元素的宽度设置为320px。通过计算,三个子元素的宽度比父元素的宽度多了80px。根据缩小比例,div.item-1的宽度缩小了80(1/5)=16px,div.item-2和div.item-3的宽度都缩小了80(2/5)=32px,所以三个子元素最终的宽度分别为84px、68px、168px,如下图:2.九格布局1)使用Flex实现HTML代码:123456789CSS代码:.squ-4{position:relative;宽度:100%;高度:0;底边距:100%;/*padding百分比是相对于父元素的宽度计算的*/margin-bottom:30px;}.squ-4.squ-inner{位置:绝对;顶部:0;左:0;宽度:100%;高度:100%;/*填充父元素容器,然后宽度和高度将始终相等*/}。squ-4.squ-inner>div{宽度:calc(98%/3);身高:calc(98%/3);边际权利:1%;底部保证金:1%;溢出:隐藏;}.squ-4.flex{显示:flex;flex-wrap:wrap;}.flex>div{flex-grow:1;背景颜色:天蓝色;文本对齐:居中;颜色:#fff;字体大小:50px;line-height:2;}.??flex>div:nth-of-type(3n){margin-right:0;}.flex>div:nth-of-type(n+7){margin-bottom:0;}这里需要注意的是,为了让每个格子的宽高相等,div。Item被两层父元素包裹,最外层div.squ-4使用height:0和padding-bottom:100%,因为padding百分比是相对于父元素的宽度计算的,设置div.squ-此时inner元素的width:100%和height:100%可以让元素的宽高始终相等。2)使用Grid实现HTML代码:123456789CSS代码:.squ-5{position:relative;顶部:0;左:0;高度:0;padding-bottom:100%;}.squ-5.squ-inner{position:absolute;顶部:0;左:0;宽度:100%;高度:100%;显示:网格;网格模板列:重复(3、1fr);网格模板行:重复(3、1fr);流:行;}.squ-5.item{背景色:粉色;border:1pxsolid#fff;}参考文章:flex布局CSS布局下flex-grow、flex-shrink、flex-basis属性详解-九宫格布局方法总结(更新中。。。)