Flexbox in responsive table layout: Column not stretching to full height

问题

I am using flexbox to create a responsive table. I'd like to achieve the following layout:

Mobile:

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

Desktop:

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

To this end I have created multiple flexboxes, one as a parent to the entire business and one for each row on the mobile layout.

I have then used breakpoints and flex-direction: row/column, which appears to work pretty well save for one issue:

On the Desktop variant, the X | 1 | 2 column (see style tickets__row) does not stretch to the full height of the parent. This is not what I expected, since align-items: stretch is the default property (plus assigning it has no effect).

How can I solve this? Demo code:

* {
			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>

回答1:

You simply need to adjust flex-grow like this:

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

Full code:

* {
  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>

As as side note the default value of justify-content is flex-start^ref and there is no stretch value for it. We have the flex-grow propety to deal with spacing on main axis. stretch is only available for align-items that control the cross axis.

The MDN page (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) is somehow missleading because we ca find stretch as a potential value for justify-content which is correct but there is a missing information that we can only find in the specification of a working draft:

The justify-content property applies along the main axis, but since stretching in the main axis is controlled by flex, stretch behaves as flex-start.

So using stretch value within a flexbox container will fallback to flex-start

来源：https://stackoverflow.com/questions/53384461/flexbox-in-responsive-table-layout-column-not-stretching-to-full-height

标签

html

css

flexbox