时间戳

首页 > 解决方案 > 在同级弹性行中对齐弹性自动单元格

html - 在同级弹性行中对齐弹性自动单元格

问题描述

我想知道是否可以在单元格上使用 flex auto 而不是 flex 1 的 flex 网格，但相邻行的单元格仍然对齐。我创建了这个问题的一个小演示。当您单击 then 按钮时，您从呼叫单元切换flex: 1到flex: auto呼叫单元。

const styles = document.documentElement.style;
const flexMode = document.querySelector('span')

let flexAuto = true;

function flexToggle(e) {
  let flex =  flexAuto ? 'auto' : '1' 
  styles.setProperty("--flex-mode", flex);
  flexAuto = !flexAuto
  flexMode.textContent = flex
}
:root{
  --flex-mode: 1
}
html, body {
  width: 100%;
}

table {
  
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 50%;
  min-height: 0;
  max-height: 8rem;
  border: dashed thin;
}

thead, tbody {
  display: flex;
  flex-direction: column;
}

tbody {
  flex: 1;
  overflow: auto;
}

tr {
  display: flex;
  padding: .3rem;
  border-bottom: blue solid;
}  

th, td {
  flex: var(--flex-mode);
  text-align: left;
  border: solid thin;
  padding: 0.2rem 0.5rem;
}

thead tr {
  padding-right: 21px;
}
<table>
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>short</th>
      <th>long in this cell</th>
      <th>medium</th>
    </tr>
        <tr>
      <th>lil short</th>
      <th>long content in this cell</th>
      <th>medium sized</th>
    </tr>
        <tr>
      <th>almost short</th>
      <th>very long content in this cell</th>
      <th>medium sized stuff</th>
    </tr>

  </tbody>
</table>

<p>
  <button onclick="flexToggle(event)">Change Flex Mode</button>
  Flex Mode: <span>1</span>
</p>

标签： htmlcsshtml-tableflexbox

解决方案

您需要为这些单元格设置宽度

th, td {
    width: calc(100% / 3);
}

因为flex:auto会根据内容调整宽度。

const styles = document.documentElement.style;
const flexMode = document.querySelector('span')

let flexAuto = true;

function flexToggle(e) {
  let flex =  flexAuto ? 'auto' : '1' 
  styles.setProperty("--flex-mode", flex);
  flexAuto = !flexAuto
  flexMode.textContent = flex
}
:root{
  --flex-mode: 1
}
html, body {
  width: 100%;
}

table {
  
  display: flex;
  flex-direction: column;
  margin: auto;
  width: 50%;
  min-height: 0;
  max-height: 8rem;
  border: dashed thin;
}

thead, tbody {
  display: flex;
  flex-direction: column;
}

tbody {
  flex: 1;
  overflow: auto;
}

tr {
  display: flex;
  padding: .3rem;
  border-bottom: blue solid;
}  

th, td {
  width: calc(100% / 3);
  flex: var(--flex-mode);
  text-align: left;
  border: solid thin;
  padding: 0.2rem 0.5rem;
}

thead tr {
  padding-right: 21px;
}
<table>
  <thead>
    <tr>
      <th>one</th>
      <th>two</th>
      <th>three</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>short</th>
      <th>long in this cell</th>
      <th>medium</th>
    </tr>
        <tr>
      <th>lil short</th>
      <th>long content in this cell</th>
      <th>medium sized</th>
    </tr>
        <tr>
      <th>almost short</th>
      <th>very long content in this cell</th>
      <th>medium sized stuff</th>
    </tr>

  </tbody>
</table>

<p>
  <button onclick="flexToggle(event)">Change Flex Mode</button>
  Flex Mode: <span>1</span>
</p>

推荐阅读