Двойной ряд с одинаковой высотой во flexbox - PullRequest
Новая
       5

Двойной ряд с одинаковой высотой во flexbox

1 голос
/ 22 мая 2019

Я создал таблицу с первым столбцом, используя две строки, поэтому следующие столбцы будут иметь две строки, но с одинаковой высотой. Некоторые ячейки будут иметь 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 голосов
/ 23 мая 2019

Вы можете добавить 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>

Мы можем переключиться на CSS-сетки, поскольку макет здесь имеет 2D-поведение - чтобы получить желаемый макет, мы можем использовать сетку 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>
0 голосов
/ 23 мая 2019

Если вы можете установить высоту вашего внешнего 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>
0 голосов
/ 22 мая 2019

Вы можете просто вставить

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...