Question

我正在使用flexbox创建一个响应表。我想要实现以下布局：

手机：

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

桌面：

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

为此，我创建了多个弹性框，一个作为整个业务的父级，另一个用于移动布局的每一行。

然后我使用了断点和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的潜在值，这是正确的，但是缺少一些信息，我们只能在其中找到the specification的工作草案：

justify-content属性沿主轴应用，但是由于主轴上的拉伸由flex控制，因此 stretch的行为就像flex-start 。

因此在flexbox容器中使用拉伸值将回退到flex-start

响应式表格布局中的Flexbox：列未拉伸到全高

1 个答案: