程序员经验分享-hwhale

css flex布局 —— 项目属性 flex-grow

2023-10-27

flex-grow 属性定义项目的放大比例，解决的问题是：在空间有多余时把多余空间分配给各个子元素。

flex-grow 的值默认为 0，也就是说，如果存在剩余空间，也不放大。

flex-grow 取值为非负数（如果取值为负数那么和0的取值效果相同）。

语法

.item {
  flex-grow: <number>; /* default 0 */
}

flex-grow 默认为0

flex-grow 默认为 0 时：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      display: flex;
      margin: 0px auto;
      width: 900px;
      height: 200px;
      background-color: #e6e6e6;
    }
    .item {
      width: 50px;
      height: 50px;
    }
    .container div:nth-of-type(1) {background-color:coral;}
    .container div:nth-of-type(2) {background-color:lightblue;}
    .container div:nth-of-type(3) {background-color:khaki;}
    .container div:nth-of-type(4) {background-color:pink;}
    .container div:nth-of-type(5) {background-color:lightgrey;}
    .container div:nth-of-type(6) {background-color:orange;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

可以看到，flex-grow 默认值为 0 时，并不会占用剩余的空白间隙扩展自己的宽度，页面效果如下：
在这里插入图片描述

flex-grow 值为正整数

如果flex-grow大于0，则flex容器剩余空间的分配就会发生。

概念：将所有正整数相加得到分母 sum，每个属性的数值作为分子，然后乘以剩余空间。

公式：分子/分母*剩余空间

平均分配空间

如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      display: flex;
      margin: 0px auto;
      width: 900px;
      height: 200px;
      background-color: #e6e6e6;
    }
    .item {
      height: 50px;
      flex:1;
    }
    .container div:nth-of-type(1) {background-color:coral;}
    .container div:nth-of-type(2) {background-color:lightblue;}
    .container div:nth-of-type(3) {background-color:khaki;}
    .container div:nth-of-type(4) {background-color:pink;}
    .container div:nth-of-type(5) {background-color:lightgrey;}
    .container div:nth-of-type(6) {background-color:orange;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

页面效果：
在这里插入图片描述

不平均分配空间

如果一个项目的 flex-grow属性不为1，则按照公式来计算每个元素占有的空间。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      display: flex;
      margin: 0px auto;
      width: 900px;
      height: 200px;
      background-color: #e6e6e6;
    }
    .item {
      height: 50px;
    }
    .container div:nth-of-type(1) {flex-grow: 1;background-color:coral;}
    .container div:nth-of-type(2) {flex-grow: 3;background-color:lightblue;}
    .container div:nth-of-type(3) {flex-grow: 1;background-color:khaki;}
    .container div:nth-of-type(4) {flex-grow: 2;background-color:pink;}
    .container div:nth-of-type(5) {flex-grow: 4;background-color:lightgrey;}
    .container div:nth-of-type(6) {flex-grow: 1;background-color:orange;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</body>
</html>

页面效果：
在这里插入图片描述

flex-grow 值为小数

flex-grow 属性值为小数，分两种情况：
1）所有 flex 项的 flex-gorw 属性值之和大于1，仍然按照上面正整数方式进行计算；
2）所有 flex 项的 flex-gorw 属性值之和小于1，基值按照1来进行计算。

例子：项目1为 0.1， 项目2为 0.3，项目3为 0.1， 项目4为 0.2，项目5为 0.1，则它们分配到的剩余空间分别为：

项目1: 900px * (0.1 / 1) = 94.7px;
项目2: 900px * (0.3 / 1) = 265.31px;
项目3: 900px * (0.1 / 1) = 94.7px;
项目4: 900px * (0.2 / 1) = 180px;
项目5: 900px * (0.1 / 1) = 94.7px;

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      display: flex;
      margin: 0px auto;
      width: 900px;
      height: 200px;
      background-color: #e6e6e6;
    }
    .item {
      height: 50px;
    }
    .container div:nth-of-type(1) {flex-grow: 0.1;background-color:coral;}
    .container div:nth-of-type(2) {flex-grow: 0.3;background-color:lightblue;}
    .container div:nth-of-type(3) {flex-grow: 0.1;background-color:khaki;}
    .container div:nth-of-type(4) {flex-grow: 0.2;background-color:pink;}
    .container div:nth-of-type(5) {flex-grow: 0.1;background-color:lightgrey;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>
</html>

页面效果：
在这里插入图片描述

flex-grow 值为小数+正整数

flex-grow 值为小数+正整数时，计算方式与正整数一样，如分母取值：sum=1+0.6+0.5+0.2+2=4.3，分子分别为：1/4.3、0.6/4.3、0.5/4.3、0.2/4.3、2/4.3

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container {
      display: flex;
      margin: 0px auto;
      width: 900px;
      height: 200px;
      background-color: #e6e6e6;
    }
    .item {
      height: 50px;
    }
    .container div:nth-of-type(1) {flex-grow: 1;background-color:coral;}
    .container div:nth-of-type(2) {flex-grow: 0.6;background-color:lightblue;}
    .container div:nth-of-type(3) {flex-grow: 0.5;background-color:khaki;}
    .container div:nth-of-type(4) {flex-grow: 0.2;background-color:pink;}
    .container div:nth-of-type(5) {flex-grow: 2;background-color:lightgrey;}
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
  </div>
</body>
</html>

页面效果：
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

CSS

css

前端

CSS3

css flex布局 —— 项目属性 flex-grow 的相关文章

  • 如何在 Bootstrap 列中使用文本溢出？

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot

  • 响应式导航栏隐藏其下方的元素

    我创建了一个响应式导航栏 但它使下面的元素 Flexslider 插件 消失 在我制作导航栏之前 下面的 Flexslider 可以正常显示 但现在不行 导航栏的 z index 为 2 所以我不知道问题是什么 我应该如何 更改什么才能允许

  • 跨浏览器：禁用输入字段的不同行为（文本可以/不能复制）

    我有一个被禁用的输入 html 字段 在某些浏览器 Chrome Edge Internet Explorer 和 Opera 中可以选择并复制文本 但至少在 Firefox 中这是不可能的 您可以通过在不同浏览器中执行以下代码来测试

  • 如何更改 Shiny 中 navbarPage 折叠的断点

    我想用shiny navbarPage collapsible TRUE 当在小屏幕上查看我的 Shiny 应用程序时 将导航元素折叠到菜单中 默认情况下 当浏览器宽度小于 940 像素时会触发折叠 有什么方法可以改变这一点 以便在稍大的浏

  • CSS：缩放字体大小以适应父块元素的高度

    我发现的几乎每个问题和答案都谈到了视口大小 这确实不是我的问题 拿着这支笔 https codepen io njt1982 pen pZjZNM https codepen io njt1982 pen pZjZNM 我有一个非常基本的

  • CSS 的波浪形状

    我正在尝试使用 CSS 重新创建此图像 我不需要重复它 这就是我开始的 但它只有一条直线 wave position absolute height 70px width 600px background e0efe3 div div 我认

  • 删除数据表列中的额外填充

    你好 我创建了 JQuery DataTables 如下所示 所以我的问题是如何删除 图片 列中过多的填充 这就是我初始化表的方式 violators tbl DataTable aoColumnDefs bSortable false a

  • 指针事件：无，过滤，适用于 ie8 和任何地方，不适用于 ie9

    正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨

  • 带有相对路径的 LESS CSS 背景

    我在使用 LESS 作为我的网站的样式表时遇到了问题 就我个人而言 我宁愿在CSS中使用相对路径而不是绝对路径 这只是我的习惯 但是现在当我使用带有导入功能的LESS时 我遇到了如下所示的问题 我有一个main less根文件夹中的文件 i

  • CSS 是否有不等于选择器？

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如

  • Vuetify 等高 v-tab-items

    请告知如何使 vuetify v tabs 内容显示在等高块中 我在文档中找不到该组件的选项可以帮助高度对齐 By default v tab item height depends on its own content height 布局

  • 输入文本中固定下划线

    我试图修复所有输入文本类型中的下划线 但没有成功 Example My code input width 100 background color fcfcfc border 0 padding 10px div class col lg

  • CSS 安全区域属性在 iPhone X 上不起作用

    就我而言 我正在 iPhone X 上运行一个 Web 应用程序 我尝试在顶部添加一个填充 以使用 Webkit 的安全区域 css 属性将我的身体推到安全区域padding top constant safe area inset top

  • css3动画硬闪烁（帧之间没有淡入淡出）

    尝试使用 css3 动画连续闪烁三个元素 我已经让它运行了 但是每一帧都有一个淡入淡出 我想将其删除 理想情况下 每个元素保持可见 1 秒 然后立即隐藏 我尝试将动画设置为帧0 and 99 for opacity 1 and 100 fo

  • Firefox 插件查找未使用的 CSS 样式[重复]

    这个问题在这里已经有答案了 可能的重复 识别未使用的 CSS 定义的工具 https stackoverflow com questions 135657 tool to identify unused css definitions 假设

  • 使用 CSS Flexbox 堆叠图像

    我正在学习使用CSSflexbox 和我想在左侧渲染一个大图像 并在彼此之上渲染两个小图像 我怎样才能使用CSS弹性盒 div class container img class image1 src alt null img class

  • 通过 SVG 背景传递鼠标事件

    我有两个 SVG 元素 每个元素覆盖整个屏幕 html body height 100 svg position absolute top 0 left 0 bottom 0 right 0

  • 只需编辑 .css 即可更改

    有 4 div class myField 每一个都在另一个之下 http jsfiddle net urielz 6Mdmd http jsfiddle net urielz 6Mdmd 我想将其视图更改为两对情侣面对面 就像结果一样 h

  • CSS 旋转轮在 5 秒后停止？

    我正在使用我在小提琴上找到的 CSS 代码来旋转我的轮子 http jsfiddle net gaby 9Ryvs 7 http jsfiddle net gaby 9Ryvs 7 div margin 20px width 100px h

  • jQuery 覆盖默认验证错误消息显示（Css）弹出/工具提示等

    我试图用 div 而不是标签来覆盖默认的错误消息标签 我看过这个帖子 https stackoverflow com questions 309574 jquery validation how to not display errors

随机推荐

  • Python爬虫入门6：模拟浏览器访问网页的http报文体压缩传输

    前往老猿Python博客 https blog csdn net LaoYuanPython 一 引言 在前面章节中介绍了使用urllib包的request模块访问网页的方法 但上节特别说明http报文头Accept Encoding最好不

  • pytorch和tensorflow有什么区别？

    PyTorch 是一种用于构建深度学习模型的功能完备框架 同时tensorflow也是常用的框架之一 大家在学习的时候 尝尝会用来做比较 那么pytorch和tensorflow有什么区别 大家所关心的问题 解答来了 pytorch和ten

  • vue拖拽实现

    拖拽介绍 目标是将左侧list中的item拖入右侧card中 如下所示 将list1和list3拖入右侧拖拽区 一 拖拽样式实现 使用vue vuetifyjs实现 页面布局可根据不同的UI库自行修改 html内容

  • C++消消乐

    键盘版 include

  • 5、JSON.parse()

    JSON parse JSON 通常用于与服务端交换数据 在接收服务器数据时一般是字符串 我们可以使用 JSON parse 方法将数据转换为 JavaScript 对象 语法 JSON parse text reviver 参数说明 te

  • 虚幻引擎程序化资源生成框架PCG 之Extents Modifier 和 Bounds Modifier

    Extents Modifier 和 Bounds Modifier这两个节点看起来很像 都是修改Point的Bouding Box 查看一下源代码 简单看一下它们的区别 文章目录 两个节点的代码对比 Bounds Modifier 源代码

  • MySQL使用ReplicationConnection导致的连接失效分析与解决

    MySQL数据库读写分离 是提高服务质量的常用手段之一 而对于技术方案 有很多成熟开源框架或方案 例如 sharding jdbc spring中的AbstractRoutingDatasource MySQL Router等 而mysql

  • 基于vue-cli、elementUI的Vue超简单入门小例子

    这个例子还是比较简单的 独立完成后 能大概知道vue是干嘛的 可以写个todoList的小例子 开始写例子之前 先对环境的部署做点简单的介绍 其实和Vue官方的差不多 如若没有安装过vue cli 先全局安装一下vue cli cnpm i

  • minikube 快速使用入门 - 安装 - 1

    minikube的官网地址 Welcome minikube k8s io minikube是什么 Minikube是一个单机版的kubernetes集群 可以在windows mac linux 快速的创建一个kubernetes集群 它

  • 原来react的createContext 这么简单

    今天看了下react中createContext相关的源码 特意在这里拿出来分享下 同时也会体现出关于本人看源码的技巧 本文采用源码分析以及源码断点调试的方式进行列举 用法 import React from react const Cou

  • (转)解决windows10下无法安装.net framework 3.5，错误代码0x800F081F

    1 下载 NET Framework 3 5的安装包netfx3 cab 将下载的文件复制到复制到 C 盘的 Windows 文件夹 后请在 命令提示符 管理员 中执行下面的命令 dism online Enable Feature Fea

  • centos下离线安装PostgreSQL

    安装简述 1 配置系统环境 2 安装postgreSQL 3 创建用户和分配权限 4 设置远程连接 配置系统环境 前提条件 文件postgresql 12 2 tar gz 放在 opt路径 步骤1 解压文件 cd opt tar zxvf

  • 编译错误记录

    一 MDK编译错误 1 error 235 variable epos msg was declared with a never completed type 这个错误的意思是epos msg这个变量被一个 没有被完成的的类型 定义 原因

  • Android串口通讯SerialPort(使用篇)

    1 什么是串口 在不会使用串口通讯之前 暂且可以把它理解为 一个可通讯的口 使用篇不深入探讨理论及原理 能理解串口如何使用之后 可以查看Android串口通讯SerialPort 浅谈原理 2 添加依赖 1 在 module 中的 buil

  • 数据库学习笔记之数据查询（一）

    数据库学习笔记之数据查询 一 查询之前先添加几条数据叭 还是基于这个里面建的那三个表 Student Course SC 进行插入查询操作 数据都是书上的 为Student表添加数据 INSERT INTO Student VALUES 1

  • pip install requests 报错 Could not fetch URL https://pypi.python.org/simple/requests/: There was ..r

    如题 pip install requests 报错 Could not fetch URL https pypi python org simple requests There was a problem confirming the

  • pandas读写mysql、h2和oracle数据库

    pandas读写mysql h2和oracle数据库 一 mysql数据库 二 h2数据库 三 oracle数据库 前言 在机器学习过程中 除开自己导入数据 用pandas的read xx之外 很多时候同样需要从数据库导入数据 特别是在做工

  • 夜莺(Flashcat)V6监控(五)：夜莺监控k8s组件(下)---使用kube-state-metrics监控K8s对象

    目录 一 前言 二 categraf作为Daemonset的方式去运行监控k8s组件 1 1 24版本以下的k8s集群部署方法 创建autu yaml绑定权限 Daemonset部署categraf采集监控kubelet kube prox

  • 在jsp页面获取url请求参数

    JSP页面 When using the JSTL s expression language the request parameters are made available in the implicit object param T

  • css flex布局 —— 项目属性 flex-grow

    flex grow 属性定义项目的放大比例 解决的问题是 在空间有多余时把多余空间分配给各个子元素 flex grow 的值默认为 0 也就是说 如果存在剩余空间 也不放大 flex grow 取值为非负数 如果取值为负数那么和0的取值效果

热门标签