The reason I personally prefer using divs with flexbox is responsiveness, and it gives me more control overall. I've always hated tables, even for tables, let alone to structure a whole page.
Tables are special. The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row. I have yet to see a convincing replication of the simplicity of the native <table> element with a flex layout. Consider the colspan and rowspan attributes for additional complexity.
You are right that flex offers much more... flexibility. But tables adhere to a certain set of rules that I don't think is easily implemented with flexbox.
"The width of a cell is determined by the widest cell in the column. The height of a cell is determined by the tallest cell in the row"
I've achieved the same with css grid. I genuinely don't think table are needed anymore, unless you're building a page to display data and don't care about responsiveness.
A grid also has a nice property of maximum 1000 rows, which holds back from bad practices of showing tables entirely. Much easier to find data by paging and a special search box rather than searching through the page.
To my knowledge, there is no implementation for rowspan or colspan attributes in a flex grid. Also, to note, I am not advocating for table-based layouts for non-tabular data.
Parent was talking about grid. You seem to be talking about flexbox but calling it “flex grid” instead – you know grid and flexbox are two separate things, right? Grid definitely has the equivalent of rowspan/colspan.
Yes, and there is no equivalent for rowspan/colspan in a grid or flex grid without resorting to CSS modifications in the former and nested containers in the latter.
What are you referring to when you say “flex grid”? There’s no such thing as “flex grid” in CSS. There’s flexbox, and there’s grid. These are two separate things.
I’m not sure what you mean by “resorting to CSS modifications” – surely that’s a given, considering we’re talking about writing CSS?
You don’t need nested containers to do the equivalent of rowspan / colspan with grid. It’s pretty fundamental to the entire feature. You can tell the browser where an element begins and where it ends with grid-column and grid-row. That doesn’t have to be a single grid cell, it can be many – it can span across multiple rows or columns.
My biggest problem with tables is that I can't control in which columns the additional space goes with a table wider than content, e.g. when table has style width:100%
Often this should be the "description" column and not the "number of items" or "price" columns.
I'd really like a "flex-grow" for table columns.
(And I can't use display:grid as it doesn't have running headers/footers for PDF files)
