「隱藏」屬性不與柔性盒

工作，我有使用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

「隱藏」屬性不與柔性盒

回答

相關問題