Question

我正在使用弹性框创建表格视图。但与html表不同，其中行是单元格（列）的容器，我需要将列作为容器。

这个要求完全来自响应式设计，当在较小的屏幕上时，列可以相互堆叠在一起封装行内部。

列数和行数将是已知的，但行内的内容将不同，因此相邻列的行高将不同。

我无法通过纯CSS获得行高。我尝试过不同的flexbox解决方案，但都没有提供100％的解决方案。我试图避免使用JS解决方案。

我能得到的最接近的是使用flex-basis和flex-grow属性，但是必须为flex-basis提供任意值，这使得一些单元格比它们必须要大得多。另外，弹性框开始重叠下面的内容。

＆＃13;

$(function() {
  $('#fix1').click(fix1Clicked);
  
  function fix1Clicked() {
  	// Add or remove fix1 class to content-table div.
    var cssClass = 'fix1';
    var $button = $(this);
    var $table = $('.content-table');
    
    var hasFix1 = $table.hasClass(cssClass);
    if (hasFix1) {
      $table.removeClass(cssClass);
      $button.html('Apply Fix1');
    }
    else {
      $table.addClass(cssClass);
      $button.html('Remove Fix1');
    }
  }
});

＆＃13;

/*** FIX 1 ***/
.fix1 .row {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 50%;
}


/***  Main CSS  ***/

.content-table {
  width: 500px;
  display: flex;
  flex-direction: row;
}

.col {
  display: flex;
  flex-direction: column;
  width: 33.3%;
}

.row {
  display: flex;
}

.row1 {
  background-color: #d0d0d0;
}

.row2 {
  background-color: #d0f0d0;
}

.row3 {
  background-color: #d0d0f0;
}

.row4 {
  background-color: #f0d0d0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Known (constant) properties of the table:</h3>
<ul>
  <li>Number of columns</li>
  <li>Number of rows</li>
</ul>

<button type="button" id="fix1">Apply Fix1</button>

<br><br>

<div class="content-table">
  
  <div class="col col1">
    <div class="row row1">
      Column 1 Row 1 
    </div>
    <div class="row row2">
      Column 1<br />Row 2
    </div>
    <div class="row row3">
      Column 1 Row 3
    </div>
    <div class="row row4">
      Column 1<br /><br /><br /><br />Row 4
    </div>
  </div>
  
  
  <div class="col col2">
    <div class="row row1">
      Column 2<br /><br /><br />Row 1
    </div>
    <div class="row row2">
      Column 2<br/>Row 2
    </div>
    <div class="row row3">
      Column 2<br /><br/>Row 3
    </div>
    <div class="row row4">
      Column 2 Row 4
    </div>
  </div>
  
  
  <div class="col col3">
    <div class="row row1">
      Column 3<br />Row 1
    </div>
    <div class="row row2">
      Column 3<br/><br/>Row 2
    </div>
    <div class="row row3">
      Column 3<br />Row 3
    </div>
    <div class="row row4">
      Column 3<br>Row 4
    </div>
  </div>

</div>


<p>
Lorem ipsum dolor sit amet, modus invidunt intellegam pri te, possit tritani id nec. Cu summo oratio honestatis per. Eum essent accumsan qualisque id. Animal molestie mel te, nec at elit fierent omittam, nec option fabulas ea. Iudico moderatius ad usu, eu modo melius qui, homero malorum usu no.
Lorem ipsum dolor sit amet, modus invidunt intellegam pri te, possit tritani id nec. Cu summo oratio honestatis per. Eum essent accumsan qualisque id. Animal molestie mel te, nec at elit fierent omittam, nec option fabulas ea. Iudico moderatius ad usu, eu modo melius qui, homero malorum usu no.
</p>

＆＃13;

Answer 1

我唯一想到的就是使用order属性。

在下面的演示中，您将看到我使用flex-wrap完全删除了包装元素并创建了行，并在flex项目上设置了宽度。默认情况下，如果Flex项位于同一行，则它们的高度将相同。在演示中，我采用了移动优先方法，在此基础上订购了基于列排序的标记。然后，在我们的CSS中，当我们点击断点时，我们使用order将所有项目重新排列到正确的行中。

如果您根据数据库中的查询构建标记并且列/行计数发生更改，则可能会有点麻烦。即使这样，您也可以根据需要快速生成适当的CSS类和定义。

.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.c1[class*="r"],
.c3[class*="r"] {
  background-color: skyblue;
}
.c2[class*="r"] {
  background-color: lightgray;
}

/* for different heights */
.r1.c1 {
  padding-bottom: 2rem;
}
.r2.c2 {
  padding-bottom: 1rem;
}
.r3.c3 {
  padding-bottom: 5rem;
}
@media ( min-width: 600px ) {
  .flex {
    flex-direction: row;
  }
  .flex > div {
    width: 33.333%;
  }
  .r1[class*="c"],
  .r3[class*="c"] {
    background-color: skyblue;
  }
  .r2[class*="c"] {
    background-color: lightgray;
  }
  .r1.c1 { order: 1; }
  .r1.c2 { order: 2; }
  .r1.c3 { order: 3; }
  .r2.c1 { order: 4; }
  .r2.c2 { order: 5; }
  .r2.c3 { order: 6; }
  .r3.c1 { order: 7; }
  .r3.c2 { order: 8; }
  .r3.c3 { order: 9; }
  
}

<div class="flex">
  
  <div class="r1 c1">C1 A or R1 A</div>
  <div class="r2 c1">C1 B or R2 A</div>
  <div class="r3 c1">C1 C or R3 A</div>
  
  <div class="r1 c2">C2 A or R1 B</div>
  <div class="r2 c2">C2 B or R2 B</div>
  <div class="r3 c2">C2 C or R3 B</div>
  
  <div class="r1 c3">C3 A or R1 C</div>
  <div class="r2 c3">C3 B or R2 C</div>
  <div class="r3 c3">C3 C or R3 C</div>

</div>

另请注意，我在每列中的单个项目上设置了额外的填充，以模仿可变高度内容。在堆叠列的较小视口上，您可以清楚地看到哪些项目更高。在较大的视口中，当项目被组织成行时，您可以看到较大项目的高度用于该行中的所有项目。

在flex表中对齐行高度

1 个答案: