更改flexbox佈局以顯示塊格式

Question

我有一個通過彈出框顯示的部分。這個效果很好，但是當視口達到640像素或更小的尺寸時，我希望能夠以100％的寬度以display: block時尚顯示所有三個部分。我嘗試將#contact-section更改爲display: block，但它完全超出了我的格式flex。

我希望它在640px的下面顯示。

有誰知道我怎麼能做到這一點不失彈性的格式，或者至少使得它在這個視工作？

Here is a fiddle which will allow the sections to be seen in a 640 or less viewport.

#contact-section { 
 
\t display: flex; 
 
\t justify-content: space-around; 
 
\t align-items: center; 
 
\t color: #FFF; 
 
\t background: #00a16d; 
 
\t padding: 1em; 
 
} 
 
#contact-section:before { 
 
\t content: ""; 
 
\t flex: 0 0 1px; 
 
\t height: 3em; 
 
\t background: #FFF; 
 
\t order: 2; 
 
} 
 
#contact-section-left { 
 
\t font-size: 1.5em; 
 
\t order: 1; 
 
\t font-style: italic; 
 
} 
 
#contact-section-right { 
 
\t background: url("../icons/envelope.png") center/contain no-repeat; 
 
\t font-size: 2em; 
 
\t order: 3; 
 
\t padding: 1em 0; 
 
} 
 
#contact-section-right a { 
 
\t color: #FFF; 
 
\t text-decoration: none; 
 
} 
 
/*--------------------------MEDIA QUERY 640------------------------------------*/ 
 

 
@media screen and (max-width:640px) { 
 

 
#contact-section { 
 
\t display: flex; 
 
\t justify-content: space-around; 
 
\t align-items: center; 
 
\t padding: 1em 2em; 
 
} 
 
#contact-section:before { 
 
\t flex: 0 0 1px; 
 
\t height: 3em; 
 
\t order: 2; 
 
    display: block; 
 
    width: 100%; 
 
} 
 
#contact-section-left { 
 
\t font-size: 1.5em; 
 
\t order: 1; 
 
    display: block; 
 
    width: 100%; 
 
} 
 
#contact-section-right { 
 
\t font-size: 2em; 
 
\t order: 3; 
 
\t padding: 1em 0; 
 
    display: block; 
 
    width: 100%; 
 
} 
 
\t 
 
}

<div id="contact-section"> 
 
\t \t <div id="contact-section-left">Tell us more about your digital marketing project.</div> 
 
\t \t <div id="contact-section-right"><a href="../discuss-project">Contact us</a></div> 
 
\t </div>

Answer 1

我畫它已經改變了方向列，似乎現在它的作品

#contact-section { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    color: #FFF; 
 
    background: #00a16d; 
 
    padding: 1em; 
 
} 
 
#contact-section:before { 
 
    content: ""; 
 
    flex: 0 0 1px; 
 
    height: 3em; 
 
    background: #FFF; 
 
    order: 2; 
 
} 
 
#contact-section-left { 
 
    font-size: 1.5em; 
 
    order: 1; 
 
    font-style: italic; 
 
} 
 
#contact-section-right { 
 
    background: url("../icons/envelope.png") center/contain no-repeat; 
 
    font-size: 2em; 
 
    order: 3; 
 
    padding: 1em 0; 
 
} 
 
#contact-section-right a { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
} 
 
/*--------------------------MEDIA QUERY 640------------------------------------*/ 
 

 
@media screen and (max-width: 640px) { 
 
    #contact-section { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    padding: 1em 2em; 
 
    } 
 
    #contact-section:before { 
 
    flex: 0 0 10px; 
 
    order: 2; 
 
    display: block; 
 
    width: 100%; 
 
    background-color: red; 
 
    } 
 
    #contact-section-left { 
 
    font-size: 1.5em; 
 
    order: 1; 
 
    display: block; 
 
    width: 100%; 
 
    } 
 
    #contact-section-right { 
 
    font-size: 2em; 
 
    order: 3; 
 
    padding: 1em 0; 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
    } 
 
}

<div id="contact-section"> 
 
    <div id="contact-section-left">Tell us more about your digital marketing project.</div> 
 
    <div id="contact-section-right"><a href="../discuss-project">Contact us</a> 
 
    </div> 
 
</div>

Answer 2

您可以使用第一個元素，而不是min-width和mediaqueries和flex-wrap:wrap最終border(s)下降僞::before。見Fiddle test 1 & Fiddle test 2。

#contact-section { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
    color: #FFF; 
 
    background: #00a16d; 
 
} 
 
#contact-section:before {} #contact-section-left { 
 
    font-size: 1.5em; 
 
    font-style: italic; 
 
    min-width: 320px; 
 
    border-top: 1em solid transparent; 
 
    border-bottom: 1em solid transparent; 
 
    border-right: 1px solid white; 
 
    padding: 1em; 
 
    flex: 1; 
 
} 
 
#contact-section-right { 
 
    background: url("../icons/envelope.png") center/contain no-repeat; 
 
    font-size: 2em; 
 
    padding: 1em; 
 
    flex: 1; 
 
    min-width: 320px; 
 
} 
 
#contact-section-right a { 
 
    color: #FFF; 
 
    text-decoration: none; 
 
}

<div id="contact-section"> 
 
    <div id="contact-section-left">Tell us more about your digital marketing project.</div> 
 
    <div id="contact-section-right"><a href="../discuss-project">Contact us</a> 
 
    </div> 
 
</div>

---

編輯

，如果你仍然想使用3EM高度的假，然後就可以從第一箱https://jsfiddle.net/mq41hgkp/3/