对齐flex表中的行高度

Question

我使用flex框创建表格视图。 但不像html表格，其中行是单元格（列）的容器，我需要列作为容器。

这个要求完全来自响应式设计，当在较小的屏幕上时，可以在彼此堆叠的行上封装行。

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

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

我能够得到的最接近的结果是使用基于flex和flex-grow的属性，但必须为flex基础赋予任意值，并且使得某些单元格比它们必须大得多。另外flex框开始重叠下面的内容。

见我的小提琴：https://jsfiddle.net/k6bfyv1p/

$(function() { 
 
    $('#fix1').click(fix1Clicked); 
 
    
 
    function fix1Clicked() { 
 
    \t // 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'); 
 
    } 
 
    } 
 
});

/*** 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; 
 
}

<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>

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>

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