html - Flex 表头根据内容的宽度

Question

目前所有的列都具有相同的宽度。我希望带有“X”内容的第一列缩小到其中内容的宽度，但不对其宽度进行硬编码。

空的标题栏也应该符合内容的宽度。

.table__row{
  display: flex;
}

.table__column {
  border: 1px solid blue;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 12px;
  overflow: hidden;
  text-align: center;
}

<div class="table">
  
  <div class="table__row -header">
    <div class="table__column"></div>
    <div class="table__column">Day</div>
    <div class="table__column">Time</div>
  </div>
  
  <div class="table__row">
    <div class="table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Monday</div>
    <div class="table__column">12:00</div>
  </div>
  
  <div class="table__row">
    <div class="table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Tuesday</div>
    <div class="table__column">13:20</div>
  </div>
  
  
</div>

Answer 1

这应该有效。基本上，您需要将该“列”中的元素的 flex-grow 设置为 0。

.table__row{
  display: flex;
}

.table__column {
  border: 1px solid blue;
  display: flex;
  flex-basis: 0;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 12px;
  overflow: hidden;
  text-align: center;
}

.shrink {
  flex-grow: 0;
}

<div class="table">
  
  <div class="table__row -header">
    <div class="shrink table__column"></div>
    <div class="table__column">Day</div>
    <div class="table__column">Time</div>
  </div>
  
  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Monday</div>
    <div class="table__column">12:00</div>
  </div>
  
  <div class="table__row">
    <div class="shrink table__column">
      <a href="#">X</a>
    </div>
    <div class="table__column">Tuesday</div>
    <div class="table__column">13:20</div>
  </div>
  
  
</div>