对齐不同容器中的文本（flexbox）

Question

我有以下内容：

.container {
  display: flex;
  flex-direction: column;
}

header {
  display: flex;
  align-items: center;
  gap: 2em;
}

main {
  display: flex;
  gap: 2em;
}

<header>
  <h1 class="title">Comments</h1>
  <p class="subtitle">
    <em> A simple app that allows a user to input comments</em>
  </p>
</header>
<main>
  <!-- Use dashes in css classes -->
  <section class="comment-input">
    <p>Add Your Comment:</p>
    <input type="text" name="comment" id="comment" />
    <button>+</button>
  </section>
  <section class="comments">
    <p>This is the first comment</p>
    <p>Here's the second one</p>
    <p>And this is one more</p>
    <p>Here is another one</p>
  </section>
</main>

我希望 header (.subtitle) 中的段落文本与“.comments”部分中的段落对齐。我如何在 flexbox 中做到这一点？

Answer 1

由于 <header> 和 <main> 都有一个 flexbox，选择 header 中的第一个元素和 main 中的第一个元素并分配 [=flex =16=] 给他们。不要忘记将 100-20% 分配给 main 和 header

的第二个元素

.title, .comment-input {
  flex: 20%;
}

.subtitle, .comments {
  flex: 80%;
}

这是 link 到 codepen

提示： 尽量避免 CSS 中的属性重复。我修改了 CSS 代码，避免重复分配属性。

.container, header, main {
  display: flex;
}

.container {
  flex-direction: column;
}

header {
  align-items: center;
}

.title, .comment-input {
  flex: 20%;
}

.subtitle, .comments {
  flex: 80%;
}

Answer 2

简单的方法就是在段落上添加一个填充，或者您可以将 header 包裹在 div 中并给它一个不同的间隙。喜欢下面的示例；

.container {
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    align-items: center;
    gap: 5.5em;

}

main {
    display: flex;
    gap: 2em;
}

<header>
        <div class="header">
                <h1 class="title">Comments</h1>
                <p class="subtitle">
                    <em> A simple app that allows a user to input comments</em>
                </p>
          </div>
            </header>
            <main>
                <!-- Use dashes in css classes -->
                <section class="comment-input">
                    <p>Add Your Comment:</p>
                    <input type="text" name="comment" id="comment" />
                    <button>+</button>
                </section>
                <section class="comments">
                    <p>This is the first comment</p>
                    <p>Here's the second one</p>
                    <p>And this is one more</p>
                    <p>Here is another one</p>
                </section>
            </main>

.container {
    display: flex;
    flex-direction: column;
}

header {
    display: flex;
    align-items: center;
    gap: 2em;
}

main {
    display: flex;
    gap: 2em;
}

.subtitle {padding-left: 53px;}

<header>
                <h1 class="title">Comments</h1>
                <p class="subtitle">
                    <em> A simple app that allows a user to input comments</em>
                </p>
            </header>
            <main>
                <!-- Use dashes in css classes -->
                <section class="comment-input">
                    <p>Add Your Comment:</p>
                    <input type="text" name="comment" id="comment" />
                    <button>+</button>
                </section>
                <section class="comments">
                    <p>This is the first comment</p>
                    <p>Here's the second one</p>
                    <p>And this is one more</p>
                    <p>Here is another one</p>
                </section>
            </main>

对齐不同容器中的文本（flexbox）

Align text in different containers (flexbox)

css

flexbox