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

另外請注意，我在每一列設置微胖上一個項目，以模仿高度可變的內容。在列堆疊時，在較小的視口上，您可以清楚地看到哪些項目較高。在較大的視口中，當項目按行組織時，可以看到較大項目的高度用於該行中的所有項目。