Вопросы Теги

Как убрать границу между гибкими детьми?

Код работает. Мне просто нужно было удалить неправильный заголовок, как предложил Виктор Губин.

1
задан Oguntoye 19 January 2019 в 03:30
поделиться

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, ваши элементы будут равномерно распределены.
0
ответ дан Andrei Gheorghiu 19 January 2019 в 03:30
поделиться