使用 CSS flex 的两个全高页面

Question

我想建立一个简单的网页，有两页全高。这两页有一个居中块和底部的小文本（带图标）。

<div id="how-to" class="section how-to">
    <div id="title" class="title">title</div>
    <div id="code" class=" code">title</div>
    <div id="view-more" class="view-more">
        <span>View intructions</span>
        <br/> <!-- other option ? -->
        <i class="fa fa-arrow-down view-more--arrow"></i>
    </div>
</div>
<div id="instructions" class="section instructions">
    <div id="intructions" class="instructions">instructions</div>
    <div id="view-more" class="view-more">
        <span>Go back</span><br/>
        <i class="fa fa-arrow-up view-more--arrow"></i>
    </div>
</div>


body {
    font-family: "Source Sans Pro","Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.3rem;
    background-color: #FFF;
}
.section {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-flow: column wrap;
    align-content: space-between;
}
.title {
    margin-top: auto;
    font-weight: bold;
    font-size: 4rem;
}
.view-more {
    color: #D1D1D1;
    text-align: center;
    cursor: pointer;
    margin-top: auto;
    margin-bottom: 10px;
}
.view-instructions {
    margin-top: auto;
}
.view-more--arrow {
    font-size: 2rem;
}

正如您在第二页上看到的那样，文本没有居中。我错过了什么？

补发

它没有响应：尝试缩小页面，内容将显示在两列中

Answer 1

您没有像 .title 那样给第二页标题 margin-top auto。

.instructions {
    margin-top: auto;
}

使用 CSS flex 的两个全高页面

Two full height pages using CSS flex

html

css

flexbox

single-page-application

responsive