Вертикально выравнивать элементы на странице, сохраняя одинаковую высоту

Question

Я пытаюсь сделать каждый элемент в той же строке равной высоте. Я не хочу растягивать элементы, хотя. Они также должны быть выровнены по вертикали на странице. Мне удалось выровнять их по вертикали на странице, используя align-items:center; Однако поля в одной строке не имеют одинаковую высоту. Есть идеи, что я здесь делаю не так? Я не хочу использовать фиксированную высоту, чтобы достигнуть этого все же. JS Bin

Я добиваюсь этого;

Большое спасибо.

body {
  background: lightblue;
  padding: 1rem;
}

.help-boxes {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.box-wrap {
  height: 92vh;
}

.help-box-link {
  background: #fff;
  -webkit-box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
  box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
  border-radius: 3px;
  margin-bottom: 2%;
  padding: 1rem;
  flex: 0 0 31.33%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrap">
  <div class="help-boxes">
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor
        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </div>
</div>

Answer 1

Используя сетку.

body {
  background: lightblue;
  padding: 1rem;
}

.box-wrap{ 
  height: 94vh;
  align-items: center;
}

.help-boxes{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.help-box-link {
  display: block;
  background: #fff;
  box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
  border-radius: 3px;
  margin-bottom: 2%;
  padding: 1rem;
  flex: 0 0 31.33%;
}

<div class="box-wrap">
  <div class="help-boxes">
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit,  Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </div>
</div>

Answer 2

В .help-boxes классе внесите это изменение

align-items: stretch; // Alter this line of 'center' to 'stretch'

Таким образом, все поля будут выровнены по наибольшему из них.

Answer 3

Используйте flex и для ребенка и удалите align-items в родителе, вместо этого используйте его в своем ребенке.

body {
  background: lightblue;
  padding: 1rem;
}

.help-boxes {
  display: flex;
  justify-content: space-around;
  flex-flow: column wrap;
  height: 100%;
}

.box-wrap {
  height: 92vh;
}

.help-box-link {
    background: #fff;
    -webkit-box-shadow: 0 1rem 3rem rgba(22, 28, 45, 0.175);
    box-shadow: 0 1rem 3rem
    rgba(22, 28, 45, 0.175);
    border-radius: 3px;
    margin: 2% 1em;
    padding: 1rem;
    flex: 1 0 31.33%;
    display: flex;
    align-items: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrap">
  <div class="help-boxes">
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor sit amet, consectetur adipiscing elit, Lorem ipsum dolor
        sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
    <a href="#" role="button" class="help-box-link">
      <p class="help-box__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </a>
  </div>
</div>