'숨겨진'속성 플렉스 박스

작동하지 않습니다 나는이 플렉스 박스 실험실 플렉스-COL 클래스의 존재는 텍스트 입력의 숨어을 방지 않습니다 왜'숨겨진'속성 플렉스 박스

<!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>

를 사용하여 다음 코드? 나는 숨김 = '숨김'을 시도했지만 이것도 작동하지 않습니다.

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 : http://jsfiddle.net/2mNux/3/이

출처

2014-05-29 19:47:00

가장 쉬운 수정 속성 셀렉터 전체 동작을 재정의하는 것입니다

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

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

여기 작업 바이올린입니다. 어떤 문서의 변경은 필요하지 : 나는 기본 동작 뒤에 논리를 추측하고

[hidden]{ 
    display:none; 
}

http://jsfiddle.net/mjxcrrve/

CSS와 "숨겨진"HTML 속성을 재정의 수 있도록하는 것입니다. "숨김"은 암시적인 "표시 : 없음"이므로 "표시"스타일을 무시하면 자연스러운 후보가됩니다. 그러나 순수한 레이아웃을 수정하면 가시성에 영향을 미친다는 것이 부적절하다고 생각합니다. !important 부분은 다른 CSS 코드에 의해 무시되는 것을 display: none 선언을 방지하기 위해 중요하다고

[hidden] { 
    display: none !important; 
}

참고 :

출처

2017-08-14 13:34:26

는이 일을 가져옵니다.

자세한 정보 : https://meowni.ca/hidden.is.a.lie.html

출처

2018-02-22 20:41:36

'숨겨진'속성 플렉스 박스

답변

관련 문제