Question

我刚刚开始弄清楚Flex框，有没有办法让Flex框中的标题行与下一个X-many行设置的自动宽度相匹配？我需要将行中的所有元素组合在一起，这样我才能使用列。

也许是一列内有行？

寻找类似于table-column元素的东西，但是对于flexbox。

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  font-size: 10px;
  text-transform: uppercase;
  font-family: helvetica;
  text-align: left;
}
.flexRowHeader {
  font-weight: bold;
}
.flexBox {
  background: lightblue;
  width: 100%;
}
.flexBox .flexRow:nth-child(2n) {
  background: #fff;
}
.flexRow {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 50px;
  align-items: center;
}
.multiLineFlexGroup {
  width: 50%;
  align-self: flex-start;
  height: 50px;
  overflow: hidden;
  transition: all 2s ease;
}
.multiLineFlexGroup .flexRow {
  align-items: center;
}
.flexItem {
  flex: auto;
  max-width: 200px;
}
button.icon {
  height: 16px;
  width: 16px;
  background-size: contain;
}

＆＃13;

<div class="flexBox">
  <div class="flexRow flexRowHeader">
    <span class="flexItem">Heading A</span>
    <span class="flexItem">Heading B</span>
    <span class="flexItem">Heading C</span>
    <span class="flexItem">Heading D</span>
    <span class="flexItem">Heading E</span>
    <span class="flexItem">Heading F</span>
    <span class="flexItem">Heading G</span>
    <span class="flexItem">Heading H</span>
  </div>
  <div class="flexRow">
    <div class="flexItem">Test</div>
    <span class="flexItem">SMALL ITEM</span>
    <span class="flexItem">ANOTHER ITEM</span>
    <span class="flexItem">VERY VERY VERY LARGE ITEM</span>
    <div class="multiLineFlexGroup">
      <div class="flexRow">
        <span class="flexItem">ITEM</span>
        <span class="flexItem">ITEM</span>
        <span class="flexItem">ITEM</span>
        <span class="flexItem">ITEM</span>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您似乎希望不同的弹性框互相交互。唯一的方法是获取标题元素大小并通过javascript将其应用于其他人（不要这样做！）。 Flex-box不是网格系统甚至是表格。如果你想要表，只需使用css和html提供的表。

Flexbox标头匹配其他行内容

1 个答案: