响应式表格布局中的Flexbox:列未拉伸到全高 [英] Flexbox in responsive table layout: Column not stretching to full height

问题描述

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

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

手机:

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

桌面:

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

为此，我创建了多个flexbox，一个作为整个业务的父级，另一个用于移动版式的每一行.

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.

然后我使用了断点和 flex-direction:row/column ，除了一个问题之外，它似乎工作得很好:

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

在桌面版本中， X |1 |2 列(请参见样式 tickets__row )不会延伸到父级的整个高度.这不是我所期望的，因为 align-items:Stretch 是默认属性(加上分配该属性无效).

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>

推荐答案

您只需要像这样调整 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

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.

"MDN"页面( https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content )有点误导，因为我们发现 stretch 作为 justify-content 正确，但是缺少的信息只能在工作草案的规范:

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:

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

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

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

这篇关于响应式表格布局中的Flexbox:列未拉伸到全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！