html - Flex-grow 依赖于子内容的存在-6ren

html - Flex-grow 依赖于子内容的存在

转载作者：行者123 更新时间：2023-11-28 15:18:03

28

4

我有两个使用 flex-grow 的“拆分”，如果只有一个存在则为 100%，如果两个都存在则为 50%/50%。问题是我希望此行为取决于 div.split 中内容的存在。

通过一些摆弄，我可以让它进行适当的扩展高度或适当的内容删除，但不能同时进行。

内容 DOM 结构确实需要保持不变。如果需要的话，也许添加一个额外的包装器就可以了。如果可能的话，我正在尝试使用纯 CSS 解决方案来解决这个问题。

JS Bin Code Snippet

CSS:

body {
  border: 1px solid black;
  display: flex;
  width: 100vw;
}

section {
  display: flex;
  flex-direction: column;
  width: 100vw;
}

.split {
  width: 100vw;
  display: flex;
  flex: 1;
}

.content {
  /* probably something here? */
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
  nav { background-color: steelblue; }

HTML:

<body>
  <section>

    <div class="split pink">
      <!-- If I remove this <h1> I would like for
           the behavior to be the same as if I
           removed this .pink.split div from the DOM -->
      <h1 class="content">A</h1>
    </div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>
</body>

最佳答案

由于 JSBin 演示填充了视口(viewport)，因此有 2 个解决方案可以解决这个问题。

内联代码的解决方案，其中 section 没有填充视口(viewport)。

你应该使用flex-grow: 1;，而不是flex: 1，与flex: 1一样，这与flex: 1 1 0，flex-basis 为 0，当 flex items 将flex-grow 基于其内容为 0 , 因此占用相等的空间。

或者，您可以使用 flex: 1 1 auto。

来源:https://www.w3.org/TR/css-flexbox-1/#flex-common

堆栈片段 - 包含内容

body {
  border: 1px solid black;
  box-sizing: border-box;
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.split {
  display: flex;
  flex-grow: 1;                 /*  or "flex: 1 1 auto"  */
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }

  <section>

    <div class="split pink">
      <!-- If I remove this <h1> I would like for
           the behavior to be the same as if I
           removed this .pink.split div from the DOM -->
      <h1 class="content">A</h1>
    </div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>

堆栈片段 - 没有内容

body {
  border: 1px solid black;
  box-sizing: border-box;
  display: flex;
}

section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.split {
  display: flex;
  flex-grow: 1;                 /*  or "flex: 1 1 auto"  */
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }

  <section>

    <div class="split pink">
      <!-- If I remove this <h1> I would like for
           the behavior to be the same as if I
           removed this .pink.split div from the DOM -->
    </div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>

JSBin 的解决方案，其中 部分 填充视口(viewport)

使用:empty选择器，当split为空时，将其改为flex: 0。

堆栈片段 - 包含内容

body {
  border: 1px solid black;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  height: 100vh;
}

section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.split {
  display: flex;
  flex: 1;
}

.split:empty {
  flex: 0;
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }

<section>

    <div class="split pink">
      <!-- If I remove this <h1> I would like for
           the behavior to be the same as if I
           removed this .pink.split div from the DOM -->
      <h1 class="content">A</h1>
    </div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>

堆栈片段 - 没有内容

body {
  border: 1px solid black;
  box-sizing: border-box;
  display: flex;
  margin: 0;
  height: 100vh;
}

section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.split {
  display: flex;
  flex: 1;
}

.split:empty {
  flex: 0;
}


/*-------------- Non pertinent styles -----------------*/
.pink { text-align: center; background-color: pink; }
.blue { text-align: center; background-color: turquoise; }
nav { background-color: steelblue; }

<section>

    <div class="split pink"></div>

    <nav> Some Nav </nav>

    <div class="split blue">
      <h2 class="content">B</h2>
    </div>

  </section>

关于html - Flex-grow 依赖于子内容的存在，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46720496/

28

4

0

文章推荐： html - css transform scale 不缩放父元素

文章推荐： java - 将CSS应用于javafx中webview内的内容

文章推荐： html - 如何固定元素 p 的大小

mysql - 连接的子查询(存在/存在)
SELECT *, `o_cheque_request.member_id`, `o_cheque_request.wallet_id` FROM `o_cheque_request`, `o_mem
SQL查找是否"存在"，别再count了！
根据某一条件从数据库表中查询『有』与『没有』，只有两种状态，那为什么在写SQL的时候，还要**SELECT count(*)**呢？无论是刚入道的程序员新星，还是精湛沙场多年的程序员老白，都是一如
c# - 存在、读写只需一步
我试图找出一个文件是否存在，如果存在，验证css样式是否已经存在，如果不存在，将它们写在文件末尾... 我已经完成了这一切，但分 3 个步骤: 该文件是否存在？ FileInfo fi= new Fi
android - 如何检测iOS用户或Android用户是否“存在”？
我们正在开发即时消息传递应用程序，并且需要在用户的化身上用绿点显示用户 friend 的“状态”。 “状态”远远超出了“my_app_is_opened_and_on_focus”，这意味着(我猜可能
SQL 查询不存在，存在
模式 Movie(title, year, director, budget, earnings) Actor(stagename, realname, birthyear) ActedIn(stag
MySQL 触发器语法错误 IF 存在
我有一个正在尝试创建的 MySQL 触发器，但无法获得正确的语法。触发器应该遍历一组关键字并将其与插入数据库的新帖子的标题进行匹配。如果找到匹配项，它应该将新帖子分配给该存储桶并更新存储桶的关键字集
MYSQL 选择子查询 IF 存在
我有 3 个表......用户、更新和碰撞。我想向发出 api 请求的用户返回最新订单的 feed 更新，并提供显示 feed 中每个状态所需的所有数据。我还需要包括更新是否已被发出 api 请求的
ios - UIViewController 存在
我正在尝试呈现一个带有 UIView 的 UIViewController。以下是我在 viewDidLoad 方法中尝试的代码。 //create the view controller UIVi
mysql - 如何在一个查询中进行多个计数/存在？
我正在努力弄清楚如何在不对 mysql 进行两次调用的情况下从一个表中检查两件事。我有一个 Members 表。我想测试MemberID 列中是否存在某个值，以及PhoneNumber 列中是否存在
vba - 循环没有 Do 错误但 Do 存在
以下代码给出了一个没有 Do Compile 错误的循环: Loop Sheets("Snap").Rows(1).AutoFilter Field:=5, Criteria1:=List
dns - 域名通过 "dig"存在
是否可以通过检查“dig”的输出来检查域名的存在？在绑定(bind)源中，我发现了这些常量: 0 DNS_R_NOEROR 1 DNS_R_FORMERR 2 DNS_R_SERVFAIL 3 DN
php - Controller 存在，但找不到页面
Controller 有问题我在 Windows 上使用服务器，一切正常，但在互联网上我试图访问页面 social_apartament/beauty_life/并且找不到该页面，代码错误 404这
d - 存在 `static if`时如何生成文档
/** This is struct S. */ struct S(T) { static if(isFloatingPoint!T) { /// This version works
clojure - 类型删除如何帮助 Clojure 存在？
JVM 类型删除如何帮助 Clojure？没有它，Clojure 还能存在吗？如果 JVM 有具体化的类型会发生什么？也就是说，Clojure 将如何改变？最佳答案 Clojure 根本不会有太大变
c - 为什么 system() 存在？
许多论文等提到对“system()”的调用是不安全且不可移植的。我不反对他们的论点。不过，我注意到许多 Unix 实用程序都有一个等效的 C 库。如果没有，源可用于各种这些工具。虽然许多论文和此类
javascript - js如何让一个变量值根据用户登录 Node 存在
在我的 Node js 应用程序中，我有一个用户登录 api。上面我在服务器端代码中创建了一个名为 customerid 的变量。现在，当用户身份验证成功时。我将他的 userid 值存储在我的 cu
azure - 存在 DNS 详细信息时重用资源管理器模板
我有一个工作资源管理器组，由 Ubuntu 14.04 虚拟机、网络接口(interface)、公共(public) IP 地址和存储帐户组成。我已经从这组资源中创建了一个模板。当我尝试部署这组资源
javascript - 存在 javascript 循环引用问题
我有一个函数createminor4(arr，锦标赛)它基本上将arr分成4组，每组8人，然后将它们一次交换到tourney 1组。从那里它插入四个{}，其中有 4 个带有空数组的键。我已经在 Ch
r - 存在 2 个图例时如何更改图例点的大小
我有一个图表，其中有两个图例。我需要更改其中一个图例的点的大小。我需要更改图例中“市场类型”的项目符号大小。我使用示例 here但不适用于我的图表。我的代码如下: k <- ggplot(subs
javascript - 存在 jQuery 字符串比较问题
我有 fiddle here展示我正在尝试做的事情。我有一个动态生成的表，因此列可以按用户选择的任何顺序显示。因此，我尝试获取两个特定 header 的索引，以便可以将 CSS 类添加到这两列以供稍

首页

博学

6Ren·AI

商城

html - Flex-grow 依赖于子内容的存在