Flexbox в адаптивном макете стола: колонна не растягивается на полную высоту

Question

Я использую flexbox для создания адаптивной таблицы.Я хотел бы получить следующий макет:

Мобильный:

X | 1 | 2 |
A |   |   |
B |   |   |
C |   |   |

Рабочий стол:

 X | A | B | C |
 1 |   |   |   |
 2 |   |   |   |

Для этого я создал несколько flexbox, один в видеродительский для всего бизнеса и по одному для каждой строки в мобильном макете.

Затем я использовал точки останова и flex-direction: row/column, что, кажется, работает неплохо, за исключением одной проблемы:

В настольном варианте столбец X | 1 | 2 (см. Стиль tickets__row) не растягивается до полной высоты родительского элемента.Это не то, что я ожидал, так как align-items: stretch является свойством по умолчанию (плюс его назначение не имеет никакого эффекта).

Как я могу решить эту проблему?Демо-код:

* {
			box-sizing: border-box;
		}

		.tickets__table {
			display: flex;
			flex-direction: column;
		}

		.tickets__row {
			display: flex;
			flex: 1 1 auto;
			flex-direction: row;
		}

		.tickets__cell {
			width: 33%;
		}

		.tickets-label {
			border: 1px solid rebeccapurple;
		}

		.tickets-content {
			border: 1px solid aqua;
		}

		@media all and (min-width:600px) {
			.tickets__table {
				flex-direction: row;
			}

			.tickets__row {
				flex-direction: column;
			}

			.tickets__cell {
				width: 100%;
			}
		}

<div class="tickets__table">

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      &nbsp;
    </div>
    <div class="tickets__cell tickets-label">
      Price 1
    </div>
    <div class="tickets__cell tickets-label">
      Price 2
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket A
    </div>
    <div class="tickets__cell tickets-content">
      $495<br />
      <s>$595</s>
    </div>
    <div class="tickets__cell tickets-content">
      $595<br />
      <s>$695</s>
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket B
    </div>
    <div class="tickets__cell tickets-content">
      $545<br />
      <s>$655</s>
    </div>
    <div class="tickets__cell tickets-content">
      $655<br />
      <s>$765</s>
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket C
    </div>
    <div class="tickets__cell tickets-content">
      $425<br />
      <s>$505</s>
    </div>
    <div class="tickets__cell tickets-content">
      $505<br />
      <s>$590</s>
    </div>
  </div>

</div>

Answer 1

Вам просто нужно настроить flex-grow следующим образом:

.tickets__cell:not(:first-child) {
    flex-grow:1;
}

Полный код:

* {
  box-sizing: border-box;
}

.tickets__table {
  display: flex;
  flex-direction: column;
}

.tickets__row {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
}

.tickets__cell {
  width: 33%;
}

.tickets-label {
  border: 1px solid rebeccapurple;
}

.tickets-content {
  border: 1px solid aqua;
}

@media all and (min-width:600px) {
  .tickets__table {
    flex-direction: row;
  }
  .tickets__cell:not(:first-child) {
    flex-grow: 1;
  }
  .tickets__row {
    flex-direction: column;
  }
  .tickets__cell {
    width: 100%;
  }
}

<div class="tickets__table">

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      &nbsp;
    </div>
    <div class="tickets__cell tickets-label">
      Price 1
    </div>
    <div class="tickets__cell tickets-label">
      Price 2
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket A
    </div>
    <div class="tickets__cell tickets-content">
      $495<br />
      <s>$595</s>
    </div>
    <div class="tickets__cell tickets-content">
      $595<br />
      <s>$695</s>
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket B
    </div>
    <div class="tickets__cell tickets-content">
      $545<br />
      <s>$655</s>
    </div>
    <div class="tickets__cell tickets-content">
      $655<br />
      <s>$765</s>
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket C
    </div>
    <div class="tickets__cell tickets-content">
      $425<br />
      <s>$505</s>
    </div>
    <div class="tickets__cell tickets-content">
      $505<br />
      <s>$590</s>
    </div>
  </div>

</div>

Как примечание стороны, значение по умолчанию justify-content равно flex-start ^ref , и для него нет значения stretch. У нас есть flex-grow, чтобы справиться с расстоянием на главной оси. stretch доступно только для align-items, которые управляют поперечной осью.

---

Страница MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) каким-то образом вводит в заблуждение, поскольку мы можем найти stretch в качестве потенциального значения для justify-content, что является правильным, но есть недостающая информация, которую мы можем найти только в спецификация рабочего проекта:

Свойство justify-content применяется вдоль главной оси, но поскольку растяжение по главной оси контролируется с помощью flex, stretch ведет себя как flex-start .

Таким образом, использование значения растяжения в контейнере flexbox приведет к возврату к flex-start