Как убрать границу между гибкими детьми? - PullRequest
Новая
       11

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

0 голосов
/ 19 января 2019

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

Для сетки, содержащей эти записи (которые добавляются динамически), я использовал 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>

1 Ответ

0 голосов
/ 19 января 2019

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

Похожие темы

...