Как я могу определить colspan с табличной структурой, которая использует flex?

Question

В своем приложении реакции я пытаюсь разобраться с flexbox. Как я могу получить colspan в flex? Это часть кода реакции:

<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;
}

Можно ли получить кольспан в гибком столе?

Answer 1

Colspan для таблиц, а не для div, управляемых макетом flexbox. Если контент, который вы пытаетесь отобразить, является табличными данными, вам следует использовать таблицы, а не div, поскольку для этого они и созданы. Выкидывание таблиц для разметки означает, что именно: не используйте таблицы для разметки, это не значит, что никогда не используйте таблицы.

Однако, если вы пытаетесь просто добавить модификатор для дочернего элемента flex, чтобы он был в два раза больше ширины, вы могли бы сделать что-то вроде этого:

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