html - 表格单元格的替代品，它不会随着屏幕的宽度而改变(换行？)

Question

我有一个问题 <div>当我更改屏幕宽度时，表格不会调整大小。我知道你可以用 flexbox 做到这一点，但我不知道怎么做。

这是我当前的代码:

CSS:

.boxer-center {
    display: table;
    border-collapse: collapse;
    margin: auto;
}
.boxer .box-row {
    display: table-row;
    padding: 5px;
}
.box_pricing{
    display: table-cell;
    text-align: left;
    padding: 5px;
    vertical-align: middle;
    border: 1px dashed red;
    min-width: 300px;
}

HTML:

<div class="boxer-center">
    <div class="box-row">
        <div class="box_pricing">Hi</div>
        <div class="box_pricing">Hi</div>
        <div class="box_pricing">Hi</div>
    </div>
    <div class="box-row">
        <div class="box_pricing">asd</div>
        <div class="box_pricing">asd</div>
        <div class="box_pricing">asd</div>
    </div>
</div>

我试图将它转换为 flexbox，但它对我不起作用。有人可以帮我吗？

Answer 1

.boxer-center {
    position: relative;
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.box-row {
    display: table-row;
    padding: 5px;
}
.box_pricing{
    display: table-cell;
    text-align: left;
    padding: 5px;
    vertical-align: middle;
    border: 1px dashed red;
}

JSFiddle Example