對齊細胞的行*和*列在Flexbox的佈局

有什麼辦法來對齊行和列的單元格使用Flexbox的（如表中的）？對齊細胞的行*和*列在Flexbox的佈局

爲了說清楚，我想要的是在下表中對齊單元格。

當然，我可以添加一些flex: XXX但問題是我不想要固定列的寬度。

我已經習慣了彎曲固定一切，但我感覺有點卡住...所以除了回到display: table或html <table> s ...之外沒有解決方案嗎？

這裏是一個fiddle，如果你要玩它:)

.myCell { 
 
    border: solid black 1px; 
 
    padding: 10px; 
 
} 
 
.myTable { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.myRow { 
 
    display: flex; 
 
    flex-direction: row; 
 
}

<div class="myTable"> 
 
    <div class="myRow"> 
 
    <div class="myCell">ROW 1, CELL 1</div> 
 
    <div class="myCell">ROW 1, CELL 2</div> 
 
    <div class="myCell">ROW 1, CELL 3</div> 
 
    </div> 
 
    <div class="myRow"> 
 
    <div class="myCell">A LONGER CELL</div> 
 
    <div class="myCell">ROW 2, CELL 2</div> 
 
    <div class="myCell">ROW 2, CELL 3</div> 
 
    </div> 
 
</div>

來源

2016-11-11 yannick1976

你有沒有試過將'flex：1'加入'myCell'？ –

@Michael_B給出了所有列相同的大小:( – yannick1976

然後可能考慮一個主flex容器（'row'），它有三個flex項目，每個flex項目都是一個嵌套的flex容器（'column'），然後填充這些列 –

爲CSS Table未來更換CSS Grid，不Flexbox。

這就是說，你可以讓Flexbox表現爲一個表，種，但不能完全取代它，你似乎尋找一個列/行佈局，使用CSS Table（而不是回去）

來源

2016-11-11 22:25:46 LGSon

對齊細胞的行和列在Flexbox的佈局

回答

對齊細胞的行*和*列在Flexbox的佈局

回答

相關問題

對齊細胞的行和列在Flexbox的佈局