`display: flex` VS `display: table`

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhuchuji/article/details/80541376

Considering the following code and understand the difference between them.

<div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-item-2</div>
    <div class="flex-item">item-item-item-3</div>
</div>
<div class="table-container">
    <div class="table-cell">cell-1</div>
    <div class="table-cell">cell-cell-2</div>
    <div class="table-cell">cell-cell-cell-3</div>
</div>
<style>
    .flex-container {
        display: flex;
        border: 1px solid red;
    }
    .flex-item {
        flex-grow: 1;
        border: 1px solid blue;
    }
    .table-container {
        display: table;
        border: 1px solid red;
        width: 100%;
    }
    .table-cell {
        display: table-cell;
        border: 1px solid blue;
    }
</style>

Flex items take up the available space equally, while table cells take up equal space of the whole container.

code on Codepen