如何创建具有 flex-direction: column; 的表？

Question

My goal is to create a table with 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;
}

My expected result: I can use the text-align: center; to make the stockPrice and stockVolume looks aligned.

My actual result: the text-align: center; does not affect the view.

What I've considered:

1. Use the HTML tables. Per my knowledge, it's not mobile friendly, especially if the first column direction is to below, and the 2nd and 3rd column direction is to the right.

Answer 1

Here you go! I used flex-direction column

I added quite a bit to the CSS, but that was just to demonstrate what the table is doing, so if you need any of the colors/margins removed; or anything changed let me know.

 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

Here's my take on your problem of using flex-direction: column to create a table. Through this approach you can use the div class="col" to append data columns to the right of Price-Volume column.

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