Flexbox中具有相同高度的双排

时间：2019-05-22 19:39:31

标签： html css css3 flexbox

我创建的表的第一列使用两行，因此后面的列将具有两行，但高度相同。一些单元格将具有2条或更多条线，而其他则没有。因此，我希望它们具有相同的高度，这将是第一行的高度的一半。

我尝试添加min-width: 50%，但是没有用。

.double-row {
  display: flex;
  border: 2px solid blue;
}

.col {
  border-right: 1px solid grey;
}

.first-col {
  display: flex;
  align-items: center;
  padding: 10px;
}

.other-col {
  display: flex;
  flex-direction: column;
}

.cell {
  padding: 10px;
  border-bottom: 1px solid grey;
}

.cell.upper {
  background: #00FF002F;
}

.cell.down {
  background: #FF00002F;
}
<div class="double-row">
  <div class="col first-col">
    <h1>
      Double Row
    </h1>
  </div>
  <div class="col other-col">
    <div class="cell upper">
      <p>
        Upper Text
      </p>
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
    </div>
  </div>
  <div class="col other-col">
    <div class="cell upper">
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
    </div>
  </div>
</div>

https://codepen.io/Agusbeche/pen/ZNvMPb

3 个答案:

答案 0 :(得分：0)

您可以插入

<p>&nbsp;</p>在另一列中以进行快速修复。但这实际上不是一个很好的解决方案，请确保您应该这样做：

将height: 50%;添加到col内的孩子中

.double-row {
  display: flex;
  border: 2px solid blue;
}

.col {
  border-right: 1px solid grey;
}

.first-col {
  display: flex;
  align-items: center;
  padding: 10px;
}

.other-col {
  display: flex;
  flex-direction: column;
}

.cell {
  flex-grow: 0;
  height: 50%;
  max-height: 50%;
  padding: 10px;
  border-bottom: 1px solid grey;
  overflow: hidden;
}

.cell.upper {
  background: #00FF002F;
}

.cell.down {
  background: #FF00002F;
}
<div class="double-row">
  <div class="col first-col">
    <h1>
      Double Row
    </h1>
  </div>
  <div class="col other-col">
    <div class="cell upper">
      <p>
        Upper Text
      </p>
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text<br/>
        Bottom Text<br/>
        Bottom Text<br/>
        Bottom Text<br/>
        Bottom Text<br/>
      </p>
    </div>
  </div>
  <div class="col other-col">
    <div class="cell upper">
    <!-- OR DO THIS: <p>&nbsp;</p> -->
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
    </div>
  </div>
</div>

答案 1 :(得分：0)

您可以将flex: 1添加到cell，以便行共享相等的空间。同时添加overflow: auto，以便在需要时滚动任何其他内容。如果您希望三列均等地共享水平空间，只需将flex: 1添加到col-请参见下面的演示：

.double-row {
  display: flex;
  border: 2px solid blue;
}

.col {
  border-right: 1px solid grey;
  flex: 1; /* if columns must share equal space */
}

.first-col {
  display: flex;
  align-items: center;
  padding: 10px;
}

.other-col {
  display: flex;
  flex-direction: column;
}

.cell {
  padding: 10px;
  border-bottom: 1px solid grey;
  flex: 1; /* equal rows */
  overflow: auto; /* overflow if content is more */
}

.cell.upper {
  background: #00FF002F;
}

.cell.down {
  background: #FF00002F;
}

input {
  width: 100%; /* added */
}
<div class="double-row">
  <div class="col first-col">
    <h1>
      Double Row
    </h1>
  </div>
  <div class="col other-col">
    <div class="cell upper">
      <p>
        Upper Text
      </p>
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
    </div>
  </div>
  <div class="col other-col">
    <div class="cell upper">
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
    </div>
  </div>
</div>

但是，没有溢出并用最大的单元格将其高度相等对于flexbox来说是无法正常工作的-请参见下面的min-height: 50%至other-cell cell的演示。整个容器不会增长：

.double-row {
  display: flex;
  border: 2px solid blue;
}

.col {
  border-right: 1px solid grey;
  flex: 1; /* if columns must share equal space */
}

.first-col {
  display: flex;
  align-items: center;
  padding: 10px;
}

.other-col {
  display: flex;
  flex-direction: column;
}

.other-col .cell {
  min-height: 50%; /* added */
}

.cell {
  padding: 10px;
  border-bottom: 1px solid grey;
  flex: 1; /* equal rows */
}

.cell.upper {
  background: #00FF002F;
}

.cell.down {
  background: #FF00002F;
}

input {
  width: 100%; /* added */
}
<div class="double-row">
  <div class="col first-col">
    <h1>
      Double Row
    </h1>
  </div>
  <div class="col other-col">
    <div class="cell upper">
      <p>
        Upper Text
      </p>
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
    </div>
  </div>
  <div class="col other-col">
    <div class="cell upper">
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
    </div>
  </div>
</div>

由于这里的布局具有2D行为，因此我们可以切换到CSS网格-要获得所需的布局，我们可以使用3x2网格，每个单元格占用1fr的空间（这意味着行将变得相等）-请参见下面的演示： 

.double-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 equal columns */
  grid-template-rows: 1fr 1fr; /* 2 equal rows */
  border: 2px solid blue;
}

.col {
  border-right: 1px solid grey;
}

.first-col {
  display: flex;
  align-items: center;
  padding: 10px;
  grid-row: 1 / span 2; /* occupy the first two rows */
}

.other-col {
  display: contents; /* promote the 'cell' to grid item */
}

.first-col + .other-col .cell {
  border-right: 1px solid grey; /* border fix */
}

.cell {
  padding: 10px;
  border-bottom: 1px solid grey;
}

.cell.upper {
  background: #00FF002F;
  grid-row: 1; /* place in first row */
}

.cell.down {
  background: #FF00002F;
}

input {
  width: 100%; /* added */
}
<div class="double-row">
  <div class="col first-col">
    <h1>
      Double Row
    </h1>
  </div>
  <div class="col other-col">
    <div class="cell upper">
      <p>
        Upper Text
      </p>
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
    </div>
  </div>
  <div class="col other-col">
    <div class="cell upper">
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
    </div>
  </div>
</div>

答案 2 :(得分：0)

如果您可以设置外部double-row的高度，则可以将flex-basis: 50%添加到您的.cell 

.double-row {
  display: flex;
  border: 2px solid blue;
}

.col {
  border-right: 1px solid grey;
}

.first-col {
  display: flex;
  align-items: center;
  padding: 10px;
}

.other-col {
  display: flex;
  flex-direction: column;
}

.cell {
  padding: 10px;
  border-bottom: 1px solid grey;
}

.cell.upper {
  background: #00FF002F;
}

.cell.down {
  background: #FF00002F;
}
<div class="double-row">
  <div class="col first-col">
    <h1>
      Double Row
    </h1>
  </div>
  <div class="col other-col">
    <div class="cell upper">
      <p>
        Upper Text
      </p>
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
    </div>
  </div>
  <div class="col other-col">
    <div class="cell upper">
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
    </div>
  </div>
</div>

.double-row {
  display: flex;
  border: 2px solid blue;
  height:400px;
}

.col {
  border-right: 1px solid grey;
}

.first-col {
  display: flex;
  align-items: center;
  padding: 10px;
}

.other-col {
  display: flex;
  flex-direction: column;
}

.cell {
  padding: 10px;
  border-bottom: 1px solid grey;
  flex-basis: 50%;
}

.cell.upper {
  background: #00FF002F;
}

.cell.down {
  background: #FF00002F;
}
<div class="double-row">
  <div class="col first-col">
    <h1>
      Double Row
    </h1>
  </div>
  <div class="col other-col">
    <div class="cell upper">
      <p>
        Upper Text
      </p>
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
      <p>
        Bottom Text
      </p>
    </div>
  </div>
  <div class="col other-col">
    <div class="cell upper">
    </div>
    <div class="cell down">
      <input type="text">
      <p>
        Bottom Text
      </p>
    </div>
  </div>
</div>

相关问题
最新问题