Как правильно выровнять нижний колонтитул внутри карточки с одинаковой высотой, но гибкой частью тела с flexbox - PullRequest
Новая
       70

Как правильно выровнять нижний колонтитул внутри карточки с одинаковой высотой, но гибкой частью тела с flexbox

0 голосов
/ 30 марта 2020

Я сделал этот сценарий минимального случая: https://jsfiddle.net/frp61gh7/

HTML: 

<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
    some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
    <p>
    this is some kind of footer that should always stick to the bottom
</p>
    </div>
  </div>
  <div class="card">x5...etc</div>
</div>

CSS: 

.row{
 display: flex;
 height: 100%;
 flex-wrap: wrap;
}
.card{
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
}
.footer{
  border: 1px solid red;
}
p{
  flex-grow: 1;
}

где у меня 6 карт, которые текут в контейнере flexbox так, как я хочу. (синяя рамка) Карты равны по высоте и текут так, как я хочу. Высота карточек в ряду может варьироваться в зависимости от самой верхней карточки в этом ряду. В реальном сценарии это работает.

Тем не менее, тело каждой карты может быть высоким или низким в зависимости от ее содержимого (например, в сценарии реальной жизни ширина производственного изображения является фиксированной, но высота является переменной). Теперь вопрос / проблема: поскольку тело имеет гибкую высоту, я не могу получить нижний колонтитул (красная граница) в нижней внутренней части карты. position: absolute - это не вариант, потому что я пытался это, и это мешало с гибким телом.

Любой совет?

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

Кроме того

Я нашел хаки sh способ решения проблем, пока нет лучшего ответа. Может помочь другим, и / или это может дать представление о том, как я хочу, чтобы конечный результат выглядел следующим образом:

В своем собственном решении я добавил заполнитель (да, возвращаясь к методам reli c) с тем же высота как нижний колонтитул ..

скрипка загадки: https://jsfiddle.net/qfo42nh8/

CSS: 

.row{
 display: flex;
 height: 100%;
 flex-wrap: wrap;
}
.placeholder{
  height: 100px;
}
.card{
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  position: relative;
}
.footer{
  border: 1px solid red;
  position: absolute;
  bottom: 0;
  height: 100px;
}

html: 

<div class="row">
 <div class="card">
    <h2>card</h2>
    <p>
    piece of body that needs flexible height..
    </p>
    <div class="placeholder">
    </div>
    <div class="footer">
    <p>
    footer content
</p>
    </div>
  </div> <!-- x 5 extra..you get the idea -->
</div>
0 голосов
/ 30 марта 2020

Сделайте карточки flex-контейнерами и установите направление для столбца, а затем задайте нижний колонтитул margin-top:auto.

Это подтолкнет нижний колонтитул внизу каждого столбца. 

.row {
  display: flex;
  height: 100%;
  flex-wrap: wrap;
}

.card {
  width: 31%;
  border: 1px solid blue;
  margin: 0.5%;
  display:flex;
  flex-direction: column;
}

.footer {
  border: 1px solid red;
  margin-top: auto;
}

p {
  flex-grow: 1;
}
<div class="row">
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      some body text. Doesn't really matter. However dit part can have various length. For instance and large image or more text then usual. In that case all other cards should be equally high of that row..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      smaller piece of body..
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
  <div class="card">
    <h2>card</h2>
    <p>
      And this piece of body will be of medium size. I just have to see how I can fill this with nonsense text. I'm drinking a cup of coffee and working at home because of Corona.
    </p>
    <div class="footer">
      <p>
        this is some kind of footer that should always stick to the bottom</p>
    </div>
  </div>
</div>
...