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 - 正确对齐单元格列

回答

相关问题