CSS flexはテーブルと同じ動作をします

Question

フレックスボックスを使用してテーブルと同じ動作をさせようとしています。例：

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

行をテーブルと同じ縦線にするにはどうすればよいですか？

だから、基本的に私は、フレキシボックスあなたのHTML構造与えられたフレキシボックスを使用していない

<table> 
    <tr> 
     <td>Short text</td> 
     <td>Text</td> 
    </tr> 
    <tr> 
     <td>Very long text</td> 
     <td>Text</td> 
    </tr> 
</table> 

Answer 1

と次のような結果を達成しようとしています。

divを使用してテーブル動作を使用する場合は、CSS Tablesを使用します。

あなたのための比較。

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>

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