'flex'在Woocomerce中覆蓋的CSS

Question

我正在嘗試在StoreFront中構建一個頁腳。我寫一段代碼，添加HTML

add_action('init', 'custom_remove_footer_credit', 10); 
function custom_remove_footer_credit() { 
remove_action('storefront_footer', 'storefront_credit', 20); 
add_action('storefront_footer', 'custom_storefront', 20); 
} 
function custom_storefront() { 
?> 
<div id = "wizfooter" class ="wiz-footer-container"> 
    <div class ="wiz-footer-left"> 
    <p>My HTML 1</p> 
    </div> 
    <div class ="wiz-footer-right"> 
    <p>My HTML 2</p> 
    </div> 
</div> <!--wiz-footer-container--> 
<?php 
} 

而且我已經使用了下面的CSS

.wiz-footer-container { 
    display: flex; 
    display: -webkit-flex; 
    flex-flow: row nowrap; 
    -webkit-flex-flow: row nowrap; 
    justify-content: space-around; 
    -webkit-justify-content: space-around; 
} 
.wiz-footer-container div { 
    flex: 1; 
    -webkit-flex: 1; 
    width: 400px; 
} 
.wiz-footer-container div:nth-of-type(1n+2) { 
    margin-left: 20px; 
} 

然而顯示：彎曲;並且所有其他Flex屬性都被覆蓋，但-webkit-display Flex屬性不是？

任何想法？我正在使用Chrome和本地服務器（WAMP）

Answer 1

被覆蓋，因爲它們稍後在CSS中。爲避免這種情況，請將前綴版本（display:-webkit-flex;）放在未加前綴的版本（display:flex;）之前。

參見：https://css-tricks.com/ordering-css3-properties/

當寫CSS3屬性，現代化的智慧是列出了 「真實」 的財產最後與供應商前綴第一：

.wiz-footer-container { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-flow: row nowrap; 
    -webkit-justify-content: space-around; 
    justify-content: space-around; 
} 
.wiz-footer-container div { 
    -webkit-flex: 1; 
    flex: 1; 
    width: 400px; 
} 
.wiz-footer-container div:nth-of-type(1n+2) { 
    margin-left: 20px; 
}