咨询热线 ：
028-86922220
×
01
关于我们

公司简介

发展历程

02
服务项目

高端网站建设

微信开发

APP开发

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03
小程序开发

小程序开发

功能应用

客户案例

04
案例展示

网站建设案例

小程序案例

电商平台案例

APP案例

系统平台案例

05
建站动态

网站建设

网站设计

常见问题

小程序

06
联系我们

公司地址

人才招聘

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法

这篇文章主要介绍“CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法”，在日常操作中，相信很多人在CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联服务项目包括海淀网站建设、海淀网站制作、海淀网页制作以及海淀网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，海淀网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到海淀省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

一、flex-grow、flex-shrink、flex-basis属性

flex-grow: 定义剩余空间的分成。默认为0，即如果存在剩余空间，也不放大。

flex-shrink: 定义了项目的缩小比例。flex-shrink的默认值为1，flex-shrink的值为0时不缩放。

flex-basis: 定义了项目占据的主轴空间。浏览器根据这个属性，计算主轴多余空间或不足空间的大小。它的默认值为auto，即项目的本来大小。
flex-basis的优先级高于width属性，如果只设置了width属性，flex-basis为auto，则项目的原始长度等于width，而如果同时设置了width和flex-basis，则项目的原始长度等于flex-basis。

示例：
HTML代码：


    
      1 2 3 4 5 6 7 8 9
    
           1 2 3 4 5 6 7 8 9     
           1 2 3 4 5 6 7 8 9     

CSS代码：

.flex-attr {
  margin-bottom: 600px;
  width: 580px;
  display: flex;
}
.item-1 {
  width: 100px;
  flex-grow: 1;
  flex-shrink: 1;
}
.item-2 {
  width: 100px;
  flex-grow: 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，如下图所示：

CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法

CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法
CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法

CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法

当父元素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，如下图所示：

CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法

CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法

CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法

CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法

二、九宫格布局

1）使用flex实现

HTML代码：


  
     1
     2
     3
     4
     5
     6
     7
     8
     9
  

CSS代码：

.squ-4 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */
  margin-bottom: 30px;
}
.squ-4 .squ-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
}
.squ-4 .squ-inner>div {
  width: calc(98% / 3); 
  height: calc(98% / 3);
  margin-right: 1%;
  margin-bottom: 1%;
  overflow: hidden;
}
.squ-4 .flex {
  display: flex;
  flex-wrap: wrap;
}
.flex>div {
  flex-grow: 1;
  background-color: skyblue;
  text-align: center;
  color: #fff;
  font-size: 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代码：


  
    1
    2
    3
    4
    5
    6
    7
    8
    9
  

CSS代码：

.squ-5 {
  position: relative;
  top: 0;
  left: 0;
  height: 0;
  padding-bottom: 100%;
}
.squ-5 .squ-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-auto-flow: row;
}
.squ-5 .item {
  background-color: pink;
  border: 1px solid #fff;
}

到此，关于“CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！


网站题目：CSS中flex-grow、flex-shrink、flex-basis属性的介绍以及实现九宫格布局的方法
文章地址：http://cqcxhl.cn/article/jopihs.html

其他资讯

分享至：
关于我们
公司简介 发展历程
服务项目
高端网站建设 小程序开发 APP开发 网络营销
建站知识
网站建设 网站设计 网站制作 小程序
联系我们
公司地址 人才招聘
成都 重庆
电话：028-86922220
地址：成都市太升南路288号锦天国际A幢1002号
电话：028-86922220
地址：重庆市南岸区弹子石腾龙大道58号2栋21-6
版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4
在线咨询
服务热线
服务热线：028-86922220
TOP