如何创建具有灵活方向的表:column

Question

我的目标是用flex-direction: column;创建一个表。

Ticker Price  --.--
--   Volume    --

index.html

<div class="d-flex">
<div class="p-1">
Ticker
<div id="stockSymbol" class="font-weight-bold display-4">--</div>
</div>
<div class="d-flex flex-column p-1">
<div class="d-flex">
Price
<div id="stockPrice" class="p-1 font-weight-bold display-4">--.--</div>
</div>
<div class="d-flex">
Volume
<div id="stockVolume" class="p-1">--</div>
</div>
</div>
</div>

styles.css

.p-1 {
padding: 1rem;
}
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.font-weight-bold {
font-weight: bold;
}
.display-4 {
font-size: 2rem;
}

我的预期结果是：我可以使用text-align: center;使stockPrice和stockVolume看起来对齐。

我的实际结果是：text-align: center;不会影响视图。

我所考虑的：

1. 使用HTML表格。据我所知，它对移动不友好，尤其是如果第一列方向在下面，第二列和第三列方向在右边

Answer 1

开始吧！我使用了弯曲方向列

我在CSS中添加了很多内容，但那只是为了演示表的功能，所以如果你需要删除任何颜色/边距；或者有什么变化，请告诉我。

html, body {
height: 100%;
margin: 0;
}
.grid2x2 {
min-height: 60%;
width: 60%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.grid2x2 > div {
display: flex; 
flex-basis: calc(50% - 40px);  
justify-content: center;
flex-direction: column;
}
.grid2x2 > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box { margin: 3px; }
.box1 { background-color: red; }
.box2 { background-color: orange; }
.box3 { background-color: purple; }
.box4 { background-color: grey; }

<div class="grid2x2">
<div class="box box1"><div>Price</div></div>
<div class="box box2"><div>--.--</div></div>
<div class="box box3"><div>Volume</div></div>
<div class="box box4"><div>--</div></div>
</div>

Answer 2

以下是我对使用flex-direction: column创建表的问题的看法。通过这种方法，您可以使用div class="col"将数据列附加到价格-数量列的右侧。

.table {
display: flex;
column-gap: 5px;
margin: 10px;
border: 1px solid black;
width: fit-content;
width: -moz-fit-content;
}
.col {
display: flex;
flex-direction: column;
justify-content: center;
row-gap: 5px;
}
.col div {
background: beige;
}
.align-center {
/* align-self: center; */
text-align: center;
}
.align-right {
/* align-self: flex-end; */
text-align: right;
}

<div class="table">
<div class="col">
<div class="align-center">Ticker</div>
<div class="align-center">--</div>
</div>
<div class="col">
<div class="align-center">Price</div>
<div class="align-center">Volume</div>
</div>
<div class="col">
<div class="align-right">--.--</div>
<div class="align-right">--</div>
</div>
</div>
<div class="table">
<div class="col">
<div class="align-center">Ticker</div>
<div class="align-center">--</div>
</div>
<div class="col">
<div class="align-center">Price</div>
<div class="align-center">Volume</div>
</div>
<div class="col">
<div class="align-right">98.56</div>
<div class="align-right">20</div>
</div>
<div class="col">
<div class="align-right">72.03</div>
<div class="align-right">13</div>
</div>
</div>