代码之家 › 专栏 › 技术社区 › Fredrik_Borgstrom

如何设置flex box容器的innerText的flex属性?

flexbox css

Fredrik_Borgstrom · 技术社区 · 6 年前

如果您的flex box容器本身包含文本(innerText),则该文本显然成为flex布局的一部分。但是,如何使用flex basis和flex grow等设置控制它呢? 有办法控制它吗?

HTML:

<div class="a">
   Sample text
   <div class="b"></div>
   <div class="c"></div>
</div>

CSS:

.a {
  display: flex;
}
.b {
  flex: 0 0 200px;
}
.c {
  flex: 0 0 100px;
}

我想控制“示例文本”的灵活属性。

是的,我知道只要把文本放在它自己的节点上就可以解决这个问题,但是我要处理的是一个+10万个项目的列表,所以我要尽量减少节点的数量。

1 回复 | 直到 6 年前

Temani Afif 6 年前

控制文本的想法是考虑两个伪元素,它们都环绕在文本周围,您可以在其中应用flex属性并实现您想要的:

.a {
  display: flex;
}
.a:before,
.a:after{
  content:"";
  background:pink;
  flex: 1 0 0%;
  
}

.b {
  flex: 1 0 200px;
  background:blue;
  order:2; /*we place them at the end*/
}

.c {
  flex: 0 1 100px;
  background:red; 
  order:2; /*we place them at the end*/
}

<div class="a">
  Sample text
  <div class="b"></div>
  <div class="c"></div>
</div>

你只需要想象应用于伪元素以获得所需结果的正确值。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

5 月前

Mass · 如何在Tailwind CSS v4中创建配置

5 月前

magenta placenta · 将css变量合并为一个变量

5 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

6 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

6 月前