Как удалить отступ между гибкими дочерними элементами?

В приведенном ниже фрагменте я пытаюсь создать сетку записей, каждая из которых имеет изображение, детали (заголовок и поддетали) и кнопку.

Для сетки, содержащей эти записи (которые добавляются динамически), я использовал сетку CSS для создания сетки автоматического заполнения с границами измерений столбцов, а для отдельных элементов записи я использовал flexbox с направлением, установленным на column чтобы убедиться, что гибкие дочерние элементы проходят сверху вниз с их space-between.

Проблема, с которой я сталкиваюсь, очевидна в прикрепленном фрагменте, когда количество деталей в одной записи в строке больше, чем в других, эти другие становятся вытесненными.

Я хочу, чтобы детали оставались на одном уровне с нижней частью изображения, а кнопка оставалась внизу.

.dashboard__main-content {
  padding: 1rem 0;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 10rem));
  grid-template-rows: auto;
  grid-auto-flow: dense;

}

.record {
  display: flex;
  flex-grow: 1;
  flex-flow: column nowrap;
  justify-content: space-between;
  border: 0.08rem solid #2a5583;
}

.record__image-holder {
  flex-basis: 45%;
}

.record__image {
  object-fit: cover;
  width: 100%;
}

.record__details {
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  margin-top: 0.2rem;
  margin-bottom: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.record__title {
  margin: 0.2rem 0;
}

.record__more-btn {
  background: #2a5583;
  color: white;
  padding: 0.5rem 2rem;
  align-self: flex-end;
  border: none;
  float: right;
  margin: 1rem;
}

.record__more-btn:hover,
.record__more-btn:focus {
  border: 0.01rem solid #2a5583;
  outline: none;
  color: #2a5583;
  background: aliceblue;
}

<section class = "dashboard__main-content">
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">Stacks of cash in rubber wads</h4>
      <p class = "record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/1">View More</button>
  </div>
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">Sanother red-flag</h4>
      <p class = "record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/2">View More</button>
  </div>
  <div class = "record record--intervention record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">need intervention</h4>
      <p class = "record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>
    </div>
    <button class = "record__more-btn" record-path = "interventions/3">View More</button>
  </div>
  <div class = "record record--intervention record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">intervention Skope 2</h4>
      <p class = "record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>
    </div>
    <button class = "record__more-btn" record-path = "interventions/4">View More</button>
  </div>
  <div class = "record record--red-flag record--investigating">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">Another red-flag tester</h4>
      <p class = "record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw
        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/5">View More</button>
  </div>
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">some</h4>
      <p class = "record__comment">s...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/6">View More</button>
  </div>
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">where the government</h4>
      <p class = "record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/7">View More</button>
  </div>
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">where the government</h4>
      <p class = "record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/8">View More</button>
  </div>

</section>

Для чего нужна гибкая основа .record__image-holder? Если вы удалите его, текст останется сверху.

— 19.01.2019 05:00

html css flexbox css-grid

19.01.2019 04:30

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

263

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Детям, которые не растут, нужно дать flex-grow:0;, а тому, что растет: flex-grow:1

.dashboard__main-content {
  padding: 1rem 0;
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-template-rows: auto;
  grid-auto-flow: dense;
  padding: 2rem;

}

.record {
  display: flex;
  flex-grow: 1;
  flex-flow: column nowrap;
  justify-content: space-between;
  border: 0.08rem solid #2a5583;
}

.record__image-holder {
  flex-grow: 0;
}
.record__image-holder img {
  display: block;
}

.record__image {
  object-fit: cover;
  width: 100%;
}

.record__details {
  padding: 0.7rem 0.5rem 0.5rem 0.5rem;
  margin-top: 0;
  margin-bottom: auto;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  flex-grow: 1;
  background-color: #fafafa;
  border-bottom: 1px solid #eee;
}

.record__title {
  margin: 0.2rem 0;
}

.record__more-btn {
  background: #2a5583;
  color: white;
  padding: 0.5rem 2rem;
  align-self: flex-end;
  border: 1px solid transparent;
  float: right;
  margin: 1rem;
}

.record__more-btn:hover,
.record__more-btn:focus {
  border: 1px solid #2a5583;
  outline: none;
  color: #2a5583;
  background: aliceblue;
  flex-grow: 0;
}
body {margin: 0;}

<section class = "dashboard__main-content">
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">Stacks of cash in rubber wads</h4>
      <p class = "record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet conse...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/1">View More</button>
  </div>
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">Sanother red-flag</h4>
      <p class = "record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem isikator malagnur adip ipsum...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/2">View More</button>
  </div>
  <div class = "record record--intervention record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">need intervention</h4>
      <p class = "record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet c sit amet consectetur adiscplicing lorem ipsum...</p>
    </div>
    <button class = "record__more-btn" record-path = "interventions/3">View More</button>
  </div>
  <div class = "record record--intervention record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">intervention Skope 2</h4>
      <p class = "record__comment">doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...</p>
    </div>
    <button class = "record__more-btn" record-path = "interventions/4">View More</button>
  </div>
  <div class = "record record--red-flag record--investigating">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">Another red-flag tester</h4>
      <p class = "record__comment">lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing doirkd dir djfkdj ejrkjks rioioid dfdkjkj eroppops dsdjrkjiojr jkjsj fjiepfis fjkdfjkjrso fsof stg-sa jkjd erridfjsk sitek er tkrj tejke wrw
        ewetie eeot ejfd eteroi reore tdg eret eoowieioiwe wwereerwer ...lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum dolor sit amet consectetur adiscplicing lorem ipsum...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/5">View More</button>
  </div>
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">some</h4>
      <p class = "record__comment">s...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/6">View More</button>
  </div>
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">where the government</h4>
      <p class = "record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/7">View More</button>
  </div>
  <div class = "record record--red-flag record--draft">
    <div class = "record__image-holder">
      <img class = "record__image" src = "https://images.pexels.com/photos/940365/pexels-photo-940365.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt = "crash site">
    </div>
    <div class = "record__details">
      <h4 class = "record__title">where the government</h4>
      <p class = "record__comment">In an effort to improve user privacy, MetaMask stopped exposing user accounts to dapps if "privacy mode" is enabled on November 2nd, 2018. Dapps should now call provider.enable() in order...</p>
    </div>
    <button class = "record__more-btn" record-path = "red-flags/8">View More</button>
  </div>

</section>

Дополнительные замечания:

чтобы ваши кнопки не перерисовывали содержимое при наведении, их border-width в обоих состояниях должны совпадать (сделать их transparent в нормальном состоянии).
почти никогда не рекомендуется указывать значение border-width в чем-то другом, кроме px (и это должно быть целое число). В противном случае вы увидите артефакты в браузерах, и ваши границы будут мерцать во время анимации (не обязательно их анимации).
если вы поместите положительное значение fr в значение max вашего повторяющегося grid-template-columns, ваши элементы будут распределены поровну.

Я использовал блоки rem на border-width, потому что в правиле html я явно установил font-size: 10px, поэтому я ожидаю, что .1rem будет 1px. Будут ли пользовательские таблицы стилей переопределять значение, которое я установил для font-size в селекторе html?

— 19.01.2019 09:17

@Oguntoye, Да, пользовательские таблицы стилей могут установить новое значение font-size для корневого элемента, тем самым изменив значение rem для всей страницы (вот почему мы в первую очередь используем rem). Вопрос в том, что вы хотите, чтобы произошло с вашей границей, когда значение rem изменится? Должна ли ваша граница 1px изменять ширину и рисковать размытием во время анимации страницы?

— 19.01.2019 19:39

19.01.2019 04:40