Question

在我的react应用程序中，我试图让我了解flexbox。如何在flex中获得colspan？这是反应代码的一部分：

<div className="table-row">
        <div className="text"></div>
        <div className="text colspan2"><textarea></textarea></div>
        <div className="text"></div>
      </div>

在我的app.css中，我得到了：

.colspan2 {
  grid-area: cell4;
}

是否可以在flex表中获得colspan？

Answer 1

Colspan适用于表格，不适用于由flexbox布局控制的div。如果要显示的内容是表数据，则应使用表，而不要使用div，因为这是它们的用途。删除表进行布局的确切含义是：不要使用表进行布局，这并不意味着永远不要使用表。

但是，如果您想做的只是向flex子元素添加一个修饰符，使其宽度是宽度的两倍，则可以执行以下操作：

.table-row {
    display: flex;
}
.text {
    flex-grow: 1;
}
.text.colspan2 {
    flex-grow: 2;
}

如何使用使用flex的表结构定义colspan？

1 个答案: