CSS Flex Get The Same Behaivor As Table

Question

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.

Baca Juga

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>

<div class="table">
  <div class="row">
    <p>Short text</p>
    <p>Text </p>
  </div>

  <div class="row">
    <p>Very long text</p>
    <p>Text </p>
  </div>

  <div>

Solution 2:

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

.row p { width: 100% }

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

Stack in Html5

CSS Flex Get The Same Behaivor As Table

Solution 1:

Solution 2:

Post a Comment for "CSS Flex Get The Same Behaivor As Table"