CSS Flexbox - 正確對齊單元格列

傳統上，我會堅持使用html表格，但在我的應用程序中，我必須在此「表」中添加一些交互（我將在具有事件監聽器的行之間實現可摺疊窗口等）。CSS Flexbox - 正確對齊單元格列

所以我決定使用flexbox並像html表一樣模擬。

但是，我無法正確排列每列的每一行。

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    border: black 1px solid; 
 
    width: 100%; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    height: 40px; 
 
    width: 100%; 
 
    align-items: center; 
 
} 
 

 
.cell { 
 
    padding-right: 25px; 
 
    padding-left: 20px; 
 
    align-items: center; 
 
    font-size: 20px; 
 
    border-right: 1px solid salmon 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="cell">Descrption</div> 
 
    <div class="cell">Amount per Month</div> 
 
    <div class="cell">Amount per year</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">Income</div> 
 
    <div class="cell">$20,000</div> 
 
    <div class="cell">$45,000</div> 
 
    </div> 
 
</div>

正如你可以看到，每一個細胞的右側邊框沒有正確對齊。

是否有可能使用彈性盒來實現這一目標？或者是我的實現是錯誤的？

注：我不能使用任何JavaScript和jQuery這一個。

來源

2017-04-13 Alejandro

嘗試添加CSS'''證明內容見片段：空間之間;'''你的類''' .row''' – aavrug

這可能是一個解決方案：http://stackoverflow.com/a/43364533/2827823 – LGSon

由於您使用的顯示器撓性。您可以使用柔性基礎屬性

下面

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    border: black 1px solid; 
 
    width: 100%; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    height: 40px; 
 
    width: 100%; 
 
    align-items: center; 
 
} 
 
.row .cell{ 
 
    flex:0 0 30%; 
 
} 
 

 
.cell { 
 
    padding-right: 25px; 
 
    padding-left: 20px; 
 
    align-items: center; 
 
    font-size: 20px; 
 
    border-right: 1px solid salmon 
 
}

<div class="color-div"> 
 

 
</div><div class="container"> 
 
    <div class="row"> 
 
    <div class="cell">Descrption</div> 
 
    <div class="cell">Amount per Month</div> 
 
    <div class="cell">Amount per year</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">Income</div> 
 
    <div class="cell">$20,000</div> 
 
    <div class="cell">$45,000</div> 
 
    </div> 
 
</div>

來源

2017-04-13 05:15:50 repzero

這很簡單。只要給細胞等寬。例如： -

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    border: black 1px solid; 
 
    width: 100%; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    height: 40px; 
 
    width: 100%; 
 
    align-items: center; 
 
} 
 

 
.cell { 
 
    padding-right: 25px; 
 
    padding-left: 20px; 
 
    align-items: center; 
 
    font-size: 20px; 
 
    border-right: 1px solid salmon; 
 
    width: 33%; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="cell">Descrption</div> 
 
    <div class="cell">Amount per Month</div> 
 
    <div class="cell">Amount per year</div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="cell">Income</div> 
 
    <div class="cell">$20,000</div> 
 
    <div class="cell">$45,000</div> 
 
    </div> 
 
</div>

來源

2017-04-13 05:11:51 Rakesh

CSS Flexbox - 正確對齊單元格列

回答

相關問題