为 flexbox 单元格分配相同的宽度
Posted
技术标签:
【中文标题】为 flexbox 单元格分配相同的宽度【英文标题】:assign flexbox cells the same width 【发布时间】:2021-08-19 16:19:51 【问题描述】:我正在使用 bootstrap 4 框架中的 display flex 构建一个表格。
我的目标是创建一个表,其中第一列将始终相同,而其他列将通过 ajax 调用大量更新。这就是为什么我要保留两列外列:一列包含固定列,另一列包含其他列。这种方法有一个问题:右边的列没有相同的宽度。 如何为每个分配相同的宽度?我想将右侧部分保留为行,因为我将在后端逐行获取数据以更新此表。 注意:我从this开始构建结构
.cell
border 1px solid black;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="d-flex">
<div class="d-flex flex-column">
<div class="p-2 cell">Header</div>
<div class="p-2 cell">101</div>
<div class="p-2 cell">102</div>
<div class="p-2 cell">103</div>
<div class="p-2 cell">104</div>
<div class="p-2 cell">105</div>
<div class="p-2 cell">106</div>
<div class="p-2 cell">107</div>
<div class="p-2 cell">108</div>
</div>
<div class="d-flex flex-column">
<div class="d-flex flex-row">
<div class="p-2 cell">1</div>
<div class="p-2 cell">2</div>
<div class="p-2 cell">3</div>
<div class="p-2 cell">4</div>
<div class="p-2 cell">5</div>
<div class="p-2 cell">6</div>
<div class="p-2 cell">7</div>
<div class="p-2 cell">8</div>
<div class="p-2 cell">9</div>
<div class="p-2 cell">10</div>
<div class="p-2 cell">11</div>
<div class="p-2 cell">12</div>
<div class="p-2 cell">13</div>
<div class="p-2 cell">14</div>
<div class="p-2 cell">15</div>
</div>
<div class="d-flex flex-row">
<div class="p-2 cell">101.1</div>
<div class="p-2 cell">101.2</div>
<div class="p-2 cell">101.3</div>
<div class="p-2 cell">101.4</div>
<div class="p-2 cell">101.5</div>
<div class="p-2 cell">101.6</div>
<div class="p-2 cell">101.7</div>
<div class="p-2 cell">101.8</div>
<div class="p-2 cell">101.9</div>
<div class="p-2 cell">101.10</div>
<div class="p-2 cell">101.11</div>
<div class="p-2 cell">101.12</div>
<div class="p-2 cell">101.13</div>
<div class="p-2 cell">101.14</div>
<div class="p-2 cell">101.15</div>
</div>
<div class="d-flex flex-row">
<div class="p-2 cell">102.1</div>
<div class="p-2 cell">102.2</div>
<div class="p-2 cell">102.3</div>
<div class="p-2 cell">102.4</div>
<div class="p-2 cell">102.5</div>
<div class="p-2 cell">102.6</div>
<div class="p-2 cell">102.7</div>
<div class="p-2 cell">102.8</div>
<div class="p-2 cell">102.9</div>
<div class="p-2 cell">102.10</div>
<div class="p-2 cell">102.11</div>
<div class="p-2 cell">102.12</div>
<div class="p-2 cell">102.13</div>
<div class="p-2 cell">102.14</div>
<div class="p-2 cell">102.15</div>
</div>
</div>
</div>
</div>
【问题讨论】:
如果您正在构建table
,为什么要使用 div?
因为这不是表格。我没有显示表格数据。 table 仅用于表格数据表示。同样,对于一个表格,只更新一些列将是一场噩梦,这种布局更简单
【参考方案1】:
将justify-content-around
类添加到每一行
.cell
border 1px solid black;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="d-flex">
<div class="d-flex flex-column">
<div class="p-2 cell">Header</div>
<div class="p-2 cell">101</div>
<div class="p-2 cell">102</div>
<div class="p-2 cell">103</div>
<div class="p-2 cell">104</div>
<div class="p-2 cell">105</div>
<div class="p-2 cell">106</div>
<div class="p-2 cell">107</div>
<div class="p-2 cell">108</div>
</div>
<div class="d-flex flex-column">
<div class="d-flex flex-row justify-content-around">
<div class="p-2 cell">1</div>
<div class="p-2 cell">2</div>
<div class="p-2 cell">3</div>
<div class="p-2 cell">4</div>
<div class="p-2 cell">5</div>
<div class="p-2 cell">6</div>
<div class="p-2 cell">7</div>
<div class="p-2 cell">8</div>
<div class="p-2 cell">9</div>
<div class="p-2 cell">10</div>
<div class="p-2 cell">11</div>
<div class="p-2 cell">12</div>
<div class="p-2 cell">13</div>
<div class="p-2 cell">14</div>
<div class="p-2 cell">15</div>
</div>
<div class="d-flex flex-row justify-content-around">
<div class="p-2 cell">101.1</div>
<div class="p-2 cell">101.2</div>
<div class="p-2 cell">101.3</div>
<div class="p-2 cell">101.4</div>
<div class="p-2 cell">101.5</div>
<div class="p-2 cell">101.6</div>
<div class="p-2 cell">101.7</div>
<div class="p-2 cell">101.8</div>
<div class="p-2 cell">101.9</div>
<div class="p-2 cell">101.10</div>
<div class="p-2 cell">101.11</div>
<div class="p-2 cell">101.12</div>
<div class="p-2 cell">101.13</div>
<div class="p-2 cell">101.14</div>
<div class="p-2 cell">101.15</div>
</div>
<div class="d-flex flex-row justify-content-around">
<div class="p-2 cell">102.1</div>
<div class="p-2 cell">102.2</div>
<div class="p-2 cell">102.3</div>
<div class="p-2 cell">102.4</div>
<div class="p-2 cell">102.5</div>
<div class="p-2 cell">102.6</div>
<div class="p-2 cell">102.7</div>
<div class="p-2 cell">102.8</div>
<div class="p-2 cell">102.9</div>
<div class="p-2 cell">102.10</div>
<div class="p-2 cell">102.11</div>
<div class="p-2 cell">102.12</div>
<div class="p-2 cell">102.13</div>
<div class="p-2 cell">102.14</div>
<div class="p-2 cell">102.15</div>
</div>
</div>
</div>
</div>
【讨论】:
快到了!如何告诉这个结构占用父 div 宽度的 100%? 将宽度设为 100%,并根据需要提供文本对齐方式。.cell width: 100%; text-align: center;
以上是关于为 flexbox 单元格分配相同的宽度的主要内容,如果未能解决你的问题,请参考以下文章
UICollectionView,UICollectionViewFlowLayout:不同的单元格宽度和相同的单元格之间定义的间距
网格布局android / kotlin中单元格的高度和宽度相同