yannick1976 yannick1976 - 29 days ago 5
HTML Question

Align cells in rows *and* columns in a flexbox layout

Is there any way to align cells in rows and columns (like in a table) using flexbox ?

To make things clear, what I would like is to align cells in the table below.

Of course I could add some

flex: XXX
but the problem is I don't want to fix the width of the columns.

I have gotten used to flex fixing everything but I feel kind of stuck... So is there no solution apart from going back to
display: table
or html
<table>
s...?

Here is a fiddle if you want to play with it :)



.myCell {
border: solid black 1px;
padding: 10px;
}
.myTable {
display: flex;
flex-direction: column;
}
.myRow {
display: flex;
flex-direction: row;
}

<div class="myTable">
<div class="myRow">
<div class="myCell">ROW 1, CELL 1</div>
<div class="myCell">ROW 1, CELL 2</div>
<div class="myCell">ROW 1, CELL 3</div>
</div>
<div class="myRow">
<div class="myCell">A LONGER CELL</div>
<div class="myCell">ROW 2, CELL 2</div>
<div class="myCell">ROW 2, CELL 3</div>
</div>
</div>




Answer

The future replacement for CSS Table is CSS Grid, not Flexbox.

That said, you can make Flexbox behave as a table, kind of, but not replace it fully, and as you seem to look for a column/row layout, use CSS Table (and that is not going back)