我一直在做一個專案，其中一個功能是發送電子郵件驗證訊息。我正在嘗試優化它，特別是針對 Outlook 平臺。我遇到的問題是flex-box在移動應用程式上不能正常作業，但在網路應用程式上作業得很好。我正在使用flex-direction: column，但它顯示為row. 有什么辦法可以克服這個嗎？
*,
*::after,
*::before {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family: 'Fabula Valhalla';
font-weight: normal;
font-style: normal;
color: #FFFFFF;
font-size: 16px;
}
body{
width: 100vw;
height: 100vh;
}
.background{
width: 100vw;
height: 100vh;
background-color: #151A29;
display: flex;
justify-content: center;
align-items: center;
}
.main-container{
background-color: rgba(0, 0, 0, 0.33);
width: 80%;
height: auto;
padding: 35px;
display: flex;
align-items: center;
flex-direction: column;
border-radius: 25px;
}
.image{
width: 90%;
border-radius: 25px;
border: solid 2px #B94E36
}
h1{
margin-top: 30px;
font-size: 46px;
letter-spacing: 2px;
}
.text-container{
margin-top: 30px;
width: 80%;
text-align: center;
font-size: 22px;
letter-spacing: 2px;
line-height: 24px;
}
.button{
margin-top: 40px;
text-decoration: none;
color: black;
font-size: 1.6rem;
background-color: #EBA550;
border-radius: 25px;
padding: 15px 50px;
margin-bottom: 20px;
}
uj5u.com熱心網友回復：
雖然display:flex對電子郵件客戶端有很好的支持，flex-direction:row但沒有。因此，在您的示例中，兩者flex-direction: column;和align-items: center;都將從 Outlook.com 或 iOS 和 Android 上的 Outlook 中洗掉，只剩下默認值display:flex（對應于flex-direction:row和align-items:stretch）。
我建議使用另一種與電子郵件客戶端（例如display:inline-block或表格）更兼容的布局方法。
- 我可以通過電子郵件發送... flex-direction
- 我可以通過電子郵件發送... display:flex
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/428121.html