html - 为移动尺寸的屏幕移除 css 中的 flex

Question

我正在使用 flexbox/flex 来居中内容。但是我想在小于 768px 的屏幕上删除 flex 属性

CSS

.row-eq-height {
min-height: 400px;
display: flex;
}

.row-eq-height .col-md-6, 
.row-eq-height .col-md-12 {
flex: 1;
display: flex;
align-items: center;
}

.section-content {
position: relative;
flex: 1;
text-align: center;
}

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

...

我不确定是什么 css 取消了 flex 以便我可以不同地定位我的元素

Answer 1

在 @media screen and (max-width: 768px) {} 中编写的每个类都将覆盖之前的类。

.row-eq-height {
   min-height: 400px;
   display: flex;
 }

 @media screen and (max-width: 768px) {
  .row-eq-height {
    /*display property will be overriden as any class further inside this scope*/
    display: block;
  }

正如之前的回答所述，display:initial 或 display:inherit 因为任何 display 属性都会取消 display:flex.