php - “flex”CSS 在 Woocommerce 中被覆盖

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;
}

但是 display:flex;并且所有其他 Flex 属性 都被覆盖，但 -webkit-display Flex 属性没有？

有什么想法吗？我正在使用 Chrome 和本地服务器 (WAMP)

Answer 1

它们被覆盖，因为它们位于 CSS 的后面。为避免这种情况，请将带前缀的版本 (display:-webkit-flex;) 放在无前缀版本 (display:flex;) 之前。

参见:https://css-tricks.com/ordering-css3-properties/

When writing CSS3 properties, the modern wisdom is to list the "real" property last and the vendor prefixes first:

.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;
}