html - 使显示:flex responsive while retaining alignment

Question

大家好堆垛机。

我在位于 Y 和 X 中间的 div 上使用了 display:flex div，为you can see here .但是我想让它响应，它几乎是!当我将浏览器宽度缩小到大约 250 像素时，div 和 div 中的文本就停止响应。

现在我明白了，如果我删除 display:flex 它将允许文本继续响应。但是，当我这样做时，对齐会下降到 div 的底部。当我删除 display:flex 时不显示错位，这让我相信我的代码中有一些东西依赖于 display:flex 来保持对齐。你可以view the website here .请找到下面的代码，以及上面链接中的 Jsfiddle。非常感谢。

 #registry {
    background-color:#fff;

    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}




.pane {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    min-height:50vh;
    padding:6rem 1.5em;
    position:relative;
    width:100%
}
.pane .pane-title, .pane .title-section {
    margin-bottom:2em;

}

.pane-title h2{
 font-family: 'Abril Fatface', cursive;
 text-transform: uppercase;
 font-size: 1.875em;
}

@media (max-width:222px){
.pane-title h2{   
    font-size:1.3em;
}
}

.pane .pane-content {
    max-width:68em;
    margin-left:auto;
    margin-right:auto
}
.pane .pane-content::after {
    clear:both;
    display:table
}
.pane .pane-row {
    display:block;
    margin-bottom:3em
}
.pane .pane-row::after {
    clear:both;
    display:table
}
.pane.flex {
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    flex:1;
        flex-direction: column  
    -ms-flex-line-pack:center;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center
}
.pane.flex .pane-content {
    -webkit-align-self:center;
    -ms-flex-item-align:center;
    align-self:center
}



 
#registry {
    background-image:url(http://kadeem.london/Content/Image/KL.png);background-color:#e94378;
    -webkit-background-size:cover;
             -moz-background-size: cover;
     -o-background-size: cover;
    background-size:cover;
    min-height:110vh
}
#registry .pane-content {
    max-width:48em;
    background-color:#fff;
    padding:6em 2em
}

@media screen and (min-width:768px) {
    #registry .registry-description {
        float:left;
        display:block;
        margin-right:2.12766%;
            text-decoration: none;
        width:65.95745%;
        margin-left:17.02128%
    }
    #registry .registry-description:last-child {
        margin-right:0
    }
    #registry p {
        text-align:center
    }
}

.registry-description p a{
    text-decoration: none;
      border-bottom: 1px solid #000;
    color: #000;
}

.registry-description p a:hover{
    text-decoration: none;
    background-color: #000;
    color: #fff;
}

<section id="registry" class="pane flex">
    <div class="pane-content">
        <div class="pane-title">
            
<h2>Get In Touch</h2>

<span class="underline"></span>

        </div>
        <div class="registry-description">
            <p>I hope your liking my website so far. If you would like to work with me you can <a href="tel:+447941661853">give me a call</a> or message me on the email below. Alternatively you can view more of my <a href="">articles</a>, <a href="">designs,</a> and <a href="">projects.</a>
            </p>
            <br>
            <button class="connn"><a>contact@kadeem.london</a>
            </button>
        </div>
    </div>
</section>

Answer 1

您的联系按钮 (contact@kadeem.london) 阻止内容进一步缩小。

不过，话虽如此，您可能不需要担心支持窄的设备 - 我所知道的所有设备在纵向方向上至少有 480 像素宽。