如何创建具有弹性方向的表:列；？

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>

​