文章/答案/技术大牛

发布

社区首页 >问答首页 >使CSS Flex元素忽略容器元素

问使CSS Flex元素忽略容器元素
EN

Stack Overflow用户

提问于 2015-06-24 17:27:32

回答 2查看 8.1K关注 0票数 5

我正在创建一个类似于选好的组件，但是我遇到了一个与flex和包装有关的问题。要点是，伪文本框中的每个“芯片”都需要位于不包含实际文本输入的容器中，但我需要在与input相同的基础上将这些芯片视为flex元素。

我的HTML结构如下所示：

<div class="box">
  <div class="chipContainer">
    <div class="chip">Chip1</div>
    <div class="chip">Chip2</div>
    <div class="chip">Chip3</div>
    <div class="chip">Chip4</div>
  </div>
  <input class="textbox" type="text">
</div>

这个柱塞实例更完整，样式大致相当于我目前正在使用的样式。

.box {
  background: #fff;
  border: 1px solid #ccc;
  width: 500px;
  overflow: auto;
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
}
.chip {
  display: inline-block;
  border: 1px solid #ccc;
  background: #eee;
  padding: 2px;
  margin-right: 1px;
  flex: auto;
}
.textbox {
  border: none;
  background: #fdd;
  font-size: 18px;
  flex: auto;
}
.textbox:focus {
  outline: none;
}
.chipContainer {
  display: inline;
}

<div class="box">
  <div class="chipContainer">
    <div class="chip">Chip1</div>
    <div class="chip">Chip2</div>
    <div class="chip">Chip3</div>
    <div class="chip">Chip4</div>
  </div>
  <input class="textbox" type="text">
</div>
<br>
<div class="box">
  <div class="chipContainer">
    <div class="chip">Chip1</div>
    <div class="chip">Chip2</div>
    <div class="chip">Chip3</div>
    <div class="chip">Chip4</div>
    <div class="chip">Chip5</div>
    <div class="chip">Chip6</div>
    <div class="chip">Chip7</div>
    <div class="chip">Chip8</div>
    <div class="chip">Chip9</div>
    <div class="chip">Chip10</div>
    <div class="chip">Chip11</div>
  </div>
  <input class="textbox" type="text">
</div>

如您所见，在.box容器中添加了足够多的芯片之后，.chipContainer将开始包装它们，但是.chipContainer仍然是一个块元素，并将input推到一个新的行中。

这个柱塞实例演示了我的目标。一旦.chipContainer被删除，布局就可以很容易地实现，但是它在组件的结构中是一个相当重要的元素，如果可能的话，我更愿意在不删除它的情况下解决这个问题。

.box {
  background: #fff;
  border: 1px solid #ccc;
  width: 500px;
  overflow: auto;
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
}
.chip {
  display: inline-block;
  border: 1px solid #ccc;
  background: #eee;
  padding: 2px;
  margin-right: 1px;
  flex: auto;
  min-width: 50px;
  max-width: 60px;
}
.textbox {
  border: none;
  background: #fdd;
  font-size: 18px;
  flex: auto;
  min-width: 250px;
}
.textbox:focus {
  outline: none;
}
.chipContainer {
  display: inline;
}

<div class="box">
  <div class="chip">Chip1</div>
  <div class="chip">Chip2</div>
  <div class="chip">Chip3</div>
  <div class="chip">Chip4</div>
  <input class="textbox" type="text">
</div>
<br>
<div class="box">
  <div class="chip">Chip1</div>
  <div class="chip">Chip2</div>
  <div class="chip">Chip3</div>
  <div class="chip">Chip4</div>
  <div class="chip">Chip5</div>
  <div class="chip">Chip6</div>
  <div class="chip">Chip7</div>
  <div class="chip">Chip8</div>
  <div class="chip">Chip9</div>
  <input class="textbox" type="text">
</div>

html

css

flexbox

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-06-24 23:33:04

显示模块3级 instroduces display: contents

元素本身不生成任何框，但是它的子元素和伪元素仍然生成正常的框。为了生成框和布局，必须将元素视为文档树中的子元素和伪元素。

所以你只需要

.chipContainer {
  display: contents;
}

.box {
  background: #fff;
  border: 1px solid #ccc;
  width: 500px;
  overflow: auto;
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
}
.chip {
  display: inline-block;
  border: 1px solid #ccc;
  background: #eee;
  padding: 2px;
  margin-right: 1px;
  flex: auto;
  min-width: 50px;
  max-width: 60px;
}
.textbox {
  border: none;
  background: #fdd;
  font-size: 18px;
  flex: auto;
}
.textbox:focus {
  outline: none;
}
.chipContainer {
  display: contents;
}

<div class="box">
  <div class="chipContainer">
    <div class="chip">Chip1</div>
    <div class="chip">Chip2</div>
    <div class="chip">Chip3</div>
    <div class="chip">Chip4</div>
  </div>
  <input class="textbox" type="text">
</div>
<br>
<div class="box">
  <div class="chipContainer">
    <div class="chip">Chip1</div>
    <div class="chip">Chip2</div>
    <div class="chip">Chip3</div>
    <div class="chip">Chip4</div>
    <div class="chip">Chip5</div>
    <div class="chip">Chip6</div>
    <div class="chip">Chip7</div>
    <div class="chip">Chip8</div>
    <div class="chip">Chip9</div>
    <div class="chip">Chip10</div>
    <div class="chip">Chip11</div>
  </div>
  <input class="textbox" type="text">
</div>

然而，请注意，它还没有得到广泛的支持。

票数 10

Stack Overflow用户

发布于 2015-06-24 18:19:13

您可以使用flex-grow和flex-basis来实现这一点。

但是，这些属性的值应该根据.chipContainer有多少子元素而改变。

ideia是(使用您的例子)，.chipContainer是.box的一个flex项，但也是其子容器的一个flex容器。作为一个flex项目，它应该比.textbox大4个大小，因为有4个.chip，所以我们使用flex-grow:4和flex-basis:4px。

.textbox和.chip应该有相同的大小，所以它们都有flex-basis:1px和flex-grow:1。

.box, .chipContainer
{
    display: flex;
}

.textbox, .chip
{
    flex-grow: 1;
    flex-basis: 1px;
    border-width: 0;
}

.chipContainer
{
    flex-grow: 4;
    flex-basis: 4px;
}

<div class="box">
  <div class="chipContainer">
    <div class="chip">Chip1</div>
    <div class="chip">Chip2</div>
    <div class="chip">Chip3</div>
    <div class="chip">Chip4</div>
  </div>
    <input type="text" class="textbox" />
</div>

这种方法的唯一问题是，至少在Chrome上，输入文本的边框导致计算失败，比其他框多出4个像素，我从所有项目中删除边框，使它们现在具有相同的宽度。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31033164

复制

相似问题

问使CSS Flex元素忽略容器元素
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使CSS Flex元素忽略容器元素EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使CSS Flex元素忽略容器元素
EN