“隐藏”属性不与柔性盒

工作，我有使用Flex-箱“隐藏”属性不与柔性盒

<!DOCTYPE html> 

    <polymer-element name='test-flex'> 
    <template> 

     <style> 
     .lab-flex-col-container { 
      display: flex; 
      flex-flow: column; 
      align-content: center; 
      background-color: gold; 
      border-radius:5px; 
      margin: 5px; 
     } 

     .lab-flex-col { 
      display:flex; 
      flex-flow:column; 
      align-self:center; 
      margin:5px; 
     } 

     .margin2 { margin: 2px; } 


     </style> 

     <form id='form' 
     class='form'> 

     <div class='lab-flex-col-container'> 
      <div class='lab-flex-col' id='hidden-does-not-work' hidden> 
       <input id='hidden-works' type='text'> 
      </div> 

      <div id='hidden-works' hidden> 
       <textarea></textarea> 
      </div> 
      <div id='hidden-does-not-work-here-either' class='lab-flex-col' hidden> 
       <button>Save</button> 
      </div> 

     </div> 
     </form> 

    </template> 

    <script type="application/dart;component=1"> 

     import 'package:polymer/polymer.dart'; 
     import 'dart:html'; 


     @CustomTag('test-flex') 
     class TestFlex extends PolymerElement 
     { 

     TestFlex.created() : super.created(); 

     ready() 
     { 
      $['hidden-does-not-work'].hidden = true; 
     } 

     void syncDb (Event e, var detail, var target) 
     { 

     } 

     @override 
     void enteredView() 
     { 
      super.enteredView(); 

      $['hidden-does-not-work-here-either'].hidden = true; 

     } 
     } 

    </script> 
    </polymer-element>

为什么实验室-FLEX-COL类的存在阻止了文本输入的隐藏在下面的代码？我试过隐藏='隐藏'，这也不起作用。

当textarea元素中隐藏时，它按预期方式工作，但是一旦添加了flex-box类，它就停止工作并且元素保持可见。

来源

2014-05-21 st_clair_clarke

使用display:none创建一个.hidden类，并将其添加到您的div类中。

HTML：

<div class='lab-flex-col-container'> 
    <div class='lab-flex-col hidden' id='hidden-does-not-work'> 
     <input id='hidden-works' type='text'> 
    </div> 
    <div id='hidden-works' hidden> 
     <textarea></textarea> 
    </div> 
    <div id='hidden-does-not-work-here-either' class='lab-flex-col hidden'> 
     <button>Save</button> 
    </div> 
</div>

CSS：

.lab-flex-col { 
    display: flex; 
} 

.lab-flex-col.hidden { 
    display: none; 
}

这里的工作小提琴：http://jsfiddle.net/2mNux/3/

来源

2014-05-29 19:47:00

最简单的解决方法是覆盖与属性选择器的整个行为。不需要文档的更改：

[hidden]{ 
    display:none; 
}

http://jsfiddle.net/mjxcrrve/

我猜测背后的默认行为的逻辑是允许覆盖使用CSS“隐藏” HTML属性。 “隐藏”或多或少是一种隐含的“显示：无”，所以重写“显示”风格是一种自然的选择。但我同意，修改纯布局应该影响可视性，似乎没有经过深思熟虑。

来源

2017-08-14 13:34:26

这干得不错：

[hidden] { 
    display: none !important; 
}

注意，!important部分是很重要的，以防止你的其他CSS代码被覆盖的display: none声明。

来源

2018-02-22 20:41:36

“隐藏”属性不与柔性盒

回答

相关问题