时间戳

首页 > 解决方案 > 如何使用 flex-direction: column; 创建一个表？

html - 如何使用 flex-direction: column; 创建一个表？

问题描述

我的目标是用flex-direction: column;.

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

索引.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>

样式.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;使stockPriceandstockVolume看起来对齐。

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

我考虑过的：

  1. 使用 HTML 表格。据我所知，它对移动设备不友好，特别是如果第一列方向在下方，而第二列和第三列方向在右侧。

标签： htmlcssflexbox

解决方案

干得好！我使用了 flex-direction 列

我在 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>

推荐阅读