如何使几个 flex-direction 列的高度相等？

Question

我正在努力使 flex-box flex-direction 列行相等。下面添加了大部分代码。我已经尝试处理它很长时间了，我当然会很感激你的帮助。

我的代码：

.table__cell {
  flex: 1;
  padding: 10px 20px;
  border: 1px solid black;
  margin: 3px;
}

.table--params {
  width: auto;
  flex: 1;
  display: flex;
}

.table--params>.table__cell {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.table--params>.table__cell .table__row {
  flex: 1;
}

<div class="table--params">
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Jan Kowalski
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        John Kowalsky
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
  </div>
  <div class="table__cell">

    <div class="table__row">
      <div class="table__cell"></div>
    </div>

    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        email@example.com
      </div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Tester
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Grafik
      </div>
    </div>
  </div>
</div>

问题在 jsfiddle 中可视化： https://jsfiddle.net/xp7cs5ag/

问题是 - 如何让每一行每一列的高度相等？

Answer 1

我曾经遇到过同样的问题，我得到了这段代码，它对我有用

HTML :-

<div class="cont">
  <div class="col">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>

  <div class="col">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>

CSS :-

.cont {
    display: table;
    width: 100%;
}

.col {
    display: table-cell;
}

Answer 2

您可以使用 display: grid（而不是 flex）实现外部 .table__cell。使用 grid-template-rows: 1fr 1fr 1fr; 可以定义每一行的高度应该相等。您还可以定义固定值，例如 px.

工作示例：

.table__cell {
  flex: 1;
  padding: 10px 20px;
  border: 1px solid black;
  margin: 3px;
}

.table--params {
  width: auto;
  flex: 1;
  display: flex;
}

.table--params>.table__cell {
  padding: 0;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

.table--params>.table__cell .table__row {
  flex: 1;
}

<div class="table--params">
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Mariusz Bocz
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Feliks Michalski
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
  </div>
  <div class="table__cell">

    <div class="table__row">
      <div class="table__cell"></div>
    </div>

    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        programista@tech-studio.pl
      </div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Programista
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Grafik
      </div>
    </div>
  </div>
</div>

如果您希望网格项目居中，您可以使用 align-items: center.

工作示例：

.table__cell {
  flex: 1;
  padding: 10px 20px;
  border: 1px solid black;
  margin: 3px;
}

.table--params {
  width: auto;
  flex: 1;
  display: flex;
}

.table--params>.table__cell {
  padding: 0;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  align-items: center;
}

.table--params>.table__cell .table__row {
  flex: 1;
}

<div class="table--params">
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Mariusz Bocz
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Feliks Michalski
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        123123123
      </div>
    </div>
  </div>
  <div class="table__cell">

    <div class="table__row">
      <div class="table__cell"></div>
    </div>

    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        programista@tech-studio.pl
      </div>
    </div>
  </div>
  <div class="table__cell">
    <div class="table__row">
      <div class="table__cell">
        Programista
      </div>
    </div>
    <div class="table__row">
      <div class="table__cell"></div>
    </div>
    <div class="table__row">
      <div class="table__cell">
        Grafik
      </div>
    </div>
  </div>
</div>

如何使几个 flex-direction 列的高度相等？

How to make equal height of few flex-direction columns?

html

css

height

flexbox