css3 align-item属性问题?

Question

加了居中后背景不能适应高度变化 这是怎么回事

Answer 1

把 align-items: center 设置到单元格上，而不是行

单元格 {
  display: flex;
  align-items: center;
}

demo.html

<div class="table">
  <div>
    <div>第一列</div>
    <div>第二列</div>
    <div>第三列</div>
  </div>
  <div>
    <div>第一列</div>
    <div>第二列、第二列、第二列、第二列</div>
    <div>第三列</div>
  </div>
  <div>
    <div>第一列</div>
    <div>第二列、第二列、第二列、第二列</div>
    <div>第三列</div>
  </div>
</div>

demo.css

.table,
.table > *,
.table > * > * {
  border: 1px #ccc;
}

.table {
  width: 300px;
  border-left-style: solid;
  border-top-style: solid;
}

.table > * {
  display: flex;
  border-bottom-style: solid;
}

.table > * > * {
  flex: 1;
  width: 0;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  border-right-style: solid;
  padding: 0.5em;
}

.table > :first-child > *,
.table > * > :first-child {
  background: #eee;
  justify-content: center;
  font-weight: bold;
}

Answer 2

不是元素背景不能适应元素高度，是元素高度没有变化，只是相对于父元素居中了，你可以把高度设置为父元素的100%，或者把背景写在父元素上