弹性布局中的断线响应

Question

如何使"div.header-title“居中(最大宽度为750px)。下面的每个H1、H2、H3都应该是左对齐的新行。

​

.header-title {
    display: flex;
    justify-content: center;
    align-items: center;
}

h2 {
display:block;
text-align:left;
}

<div class="header-title">
    <h1 class="title">Title 1</h1>
    <h2 class="author">Author</h2>
    <h2 class="author-info ">more from <a href="#">Author</a></h2>
</div> 

​

Answer 1

在您的媒体查询中添加以下内容：

.header-title {
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 750px; 
}

& .header-title h1,
.header-title h2 {
    width: 100%;
}