在页面上垂直对齐元素，同时保持相等的高度

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

也为孩子使用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>

Answer 3

在.help-boxes类中进行更改

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

这样，所有框都将基于其中的最大框对齐。