`display: flex` VS `display: table`
阿新 • • 發佈:2018-11-08
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.