Question

我在flexbox中的项目显示在2列中。这些项目是可扩展的（类似于下拉列表）。当用户单击它展开的项目时，还会使用它展开行。我想要在点击时扩展项目，而不是行。

发生了什么：

应该发生什么：

列的代码：

list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 80px auto 0;
  max-width: 1096px;

  @include mediaQuery(max, 1080px) {
    width: 940px;
  }

  @include mediaQuery(max, $tablet) {
    width: 526px;
  }

  @include mediaQuery(max, $mobile) {
    width: 335px;
  }

  @include mediaQuery(max, 320px) {
    width: 285px;
  }
}

我试图在堆栈上找到类似的问题，但似乎没有其他人遇到这个问题，或者之前没有问过这个问题。

任何帮助将不胜感激！感谢

加入问题：

<div className="analyzed-genes-list">
  {
   data.map((item, index) => (
    <GeneCard key={index} gene={item.gene} cancers={item.cancers} positives={this.state.posGenes} traits={this.state.traits} />
   ))
  }
 </div>

GeneCard.js

<div className={this.state.toggleBody ? "gene-card-active" : "gene-card"}>
  <div className="gene-card-title" onClick={this.showBody} style={{backgroundImage: this.state.toggleBody ? `url(${ChevronUp})` : `url(${ChevronDown})`}}>
    <span className="gene-name">{this.props.gene}</span>
      {
       this.state.pos ?
        <span className="pos-variant">{this.state.variants} variant
         { this.state.variants > 1 ? 's' : null }
           &nbsp;detected</span>
           :
           <span className="variant">Variant not detected</span>
         }
        </div>
        {
          this.state.toggleBody ?
          <div className="gene-card-body">
            {
              this.props.cancers.map((cancer, index) => (
                <span key={cancer} className="cancer">
                  {cancer}
                  {
                    index === this.props.cancers.length - 1 ?
                    null
                    :
                    ','
                  }
                  &nbsp;
                </span>
              ))
            }
          </div>
          :
          null
        }
      </div>

Answer 1

我写了一个快速的例子，说明如何用css实现这一目标。

使用绝对定位时，盒子不占用空间，因此其他盒子不会向下移动。确保正确定位需要相对定位。

function activate() {
    const listItem = document.getElementById("listitem1");
    const expansion = document.getElementById("expansion1");
    expansion.classList.toggle("active");
    expansion.style.top = listItem.clientHeight + "px";
}

.container {
  margin-top: 10px;
  display: flex;
  width: 300px;
  height: 300px;
  flex-direction: column;
}

.listitem {
  flex: 1;
  margin-top: 10px;
  background-color: red;
}

.listitem-expanded {
  display: none;
  position: absolute;
  top: 0px;
  width: 100%;
  height: 50px;
  background-color: blue;
}

.listitem-expanded.active {
    display: block;
}

<div class="container">
  <div id="listitem1" class="listitem" onclick="activate()">
    <div style="position: relative">
      <div id="expansion1" class="listitem-expanded">expansion</div>
    </div>
    test
  </div>
  <div class="listitem">test</div>
  <div class="listitem">test</div>
  <div class="listitem">test</div>
  <div class="listitem">test</div>
  <div class="listitem">test</div>
</div>

Answer 2

这可能是一种方法......不是CSS解决方案，但是......

基本上，您将数据输入并将其除以一半。因此，您将在React中渲染2个不同的数组。

列表：

componentDidMount(){
  let first = data.slice(0, Math.round(data.length / 2));

  let second = data.slice(Math.round(data.length / 2), data.length);

   this.setState({
      firstHalfData: first,
      lastHalfData: second
    });
}

JSX：

<div className="analyzed-genes-list">
   <div className="analyzed-genes-list-col">
      {
        this.state.firstHalfData.map((item, index) => (
         <GeneCard key={index} gene={item.gene} cancers={item.cancers} positives={this.state.posGenes} traits={this.state.traits} />
           ))
         }
       </div>
     <div className="analyzed-genes-list-col">
        {
          this.state.lastHalfData.map((item, index) => (
           <GeneCard key={index} gene={item.gene} cancers={item.cancers} positives={this.state.posGenes} traits={this.state.traits} />
            ))
         }
       </div>
     </div>

CSS：

.analyzed-genes-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 80px auto 0;
  max-width: 1096px;
  width: 100%;

  @include mediaQuery(max, 1080px) {
    width: 940px;
  }

  @include mediaQuery(max, $tablet) {
    width: 526px;
  }

  @include mediaQuery(max, $mobile) {
    width: 335px;
  }

  @include mediaQuery(max, 320px) {
    width: 285px;
  }
}

.analyzed-genes-list-col {
  display: flex;
  flex-direction: column;
  max-width: 526px;

  @include mediaQuery(min, 1081px) {
    width: 508px;
  }

  @include mediaQuery(max, 1080px) {
    width: 440px;
  }

  @include mediaQuery(max, $tablet) {
    width: 100%;
  }
}

如果有人有CSS的解决方案，我全都耳朵！

Answer 3

这是使用css的列功能的css解决方案。

.wrapping-list {
  columns: 2;
}

.list-item {
  padding: 5px;
  margin-bottom: 10px;
  background: red;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

.list-item-expansion {
  width: 100%;
  height: 50px;
  background: blue;
}

<div class="wrapping-list">
    <div class="list-item">
      test
      <div class="list-item-expansion">
        expansion
      </div>
    </div>
    <div class="list-item">test</div>
    <div class="list-item">test</div>
    <div class="list-item">test</div>
    <div class="list-item">test</div>
    <div class="list-item">test</div>
    <div class="list-item">test</div>
    <div class="list-item">test</div>
    <div class="list-item">test</div>
    <div class="list-item">test</div>
</div>

行中的Flexbox可扩展项目，使用项目停止行扩展

3 个答案: