使用flexbox时，当标题大小不同时，如何对齐2列内部段落文本？

Question

CODEPEN

当我的h1s大小不同时，如何在列之间对齐我的段落？警告我无法控制标题的大小，因此无法添加静态高度。

与十字准线对齐。

HTML：

<div class="paddingBlock">
  <h1>Align the paragraphs to dynamic height h1s</h1>
  <p>How do I make sure the paragraphs align w/o a fixed height on headers ?</p>


  <div class="eqWrap">
    <div class="eq">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium numquam quibusdam quis, deleniti placeat quas vitae ex </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam harum commodi impedit.</p>
    </div>
    <div class="eq">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nesciunt aliquam magni corporis dolor, assumenda similique nisi doloremque repudiandae, consequatur, reprehenderit. Explicabo dolorum consequatur quasi consequuntur, qui adipisci saepe ipsam!</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam harum commodi impedit.</p>
    </div>
  </div>
</div>

CSS：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

    box-sizing: border-box; 
}

html, body  { 
    height: 100%;
    width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}

h1 {
  font-size: 150%;
}

p {
  margin-bottom: 10px;
}

.eqWrap {
    display: flex;
}

.eq {
  width: 50%;
    padding: 10px;
}

.eq:nth-child(1) {
  background: papayawhip;
}

.eq:nth-child(2) {
  background: maroon;
}

Answer 1

您可以尝试的一件事是制作内容框（.eq）flex容器，然后使用auto页边距将段落固定在底部：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  width: 100%;
}
body {
  font-family: sans-serif;
  line-height: 1.4;
}
h1 {
  font-size: 150%;
}
.eqWrap {
  display: flex;
}
.eq {
  width: 50%;
  padding: 10px;
  display: flex;          /* NEW */
  flex-direction: column; /* NEW */
}

p {
  margin-top: auto;       /* NEW */
  margin-bottom: 10px;
}

<div class="paddingBlock">
  <h1>Align the paragraphs to dynamic height h1s</h1>
  <p>How do I make sure the paragraphs align w/o a fixed height on headers ?</p>
  <div class="eqWrap">
    <div class="eq">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium numquam quibusdam quis, deleniti placeat quas vitae ex </h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam harum commodi impedit.</p>
    </div>
    <div class="eq">
      <h1>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem nesciunt aliquam magni corporis dolor, assumenda similique nisi doloremque repudiandae, consequatur, reprehenderit. Explicabo dolorum consequatur quasi consequuntur, qui adipisci saepe ipsam!</h1>
      <p>Align these paragraphs. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime aliquam inventore doloribus debitis id facere exercitationem, voluptate necessitatibus consequuntur, delectus et nisi eaque reprehenderit natus assumenda, ipsam
        harum commodi impedit.</p>
    </div>`
  </div>

Revised Codepen

根据每个段落的大小以及h1对齐的位置，您可能需要调整auto页边距。以下是一些示例：Methods for Aligning Flex Items