Css Flex Get The Same Behaivor As Table

I'm trying to use flexbox to get the same behavior as a table. For example:

Short text

Text

Solution 1:

Not using flexbox given your HTML structure.

If you want table behaviour, using divs, use CSS Tables.

A comparison for you.

table {
  border-collapse: collapse;
  margin-bottom: 1em;
}

td {
  border: 1px solid grey;
  padding: 1em;
  background: lightgreen;
}

.table {
  display: inline-table;
}

.row {
  display: table-row;
}

p {
  display: table-cell;
  padding: 1em;
  border: 1px solid grey;
  background: lightblue;
}

<table><tr><td>Short text</td><td>Text</td></tr><tr><td>Very long text</td><td>Text</td></tr></table><divclass="table"><divclass="row"><p>Short text</p><p>Text </p></div><divclass="row"><p>Very long text</p><p>Text </p></div><div>

Solution 2:

.row {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.rowp { width: 100% }

<divclass="table"><divclass="flex row"><p>Short text</p><p>Text </p></div><divclass="flex row"><p>Very long text</p><p>Text </p></div></div>

Share