在 css 中删除移动尺寸屏幕的 flex答案

【问题标题】：removing flex in css for mobile size screens在 css 中删除移动尺寸屏幕的 flex
【发布时间】：2017-03-21 16:19:02
【问题描述】：

我正在使用 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 以便我可以以不同的方式定位我的元素

【问题讨论】：

标签： html css flexbox

【解决方案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。

【讨论】：

什么会抵消 flex:1;和对齐项目：中心；还是需要覆盖？

【解决方案2】：

为什么不使用

@media screen and (min-width: 768px) {
flex code here
}

【讨论】：

?我希望 flex 在大屏幕上工作，而不是在 768 屏幕上工作
使用 'min-width' 可以在 768px 及以上的屏幕上工作