tài sản 'ẩn' không làm việc với flex-box

Tôi có đoạn mã sau sử dụng flex-boxtài sản 'ẩn' không làm việc với flex-box

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

Tại sao sự hiện diện của lớp phòng thí nghiệm-flex-col ngăn ngừa sự cất giấu đầu vào văn bản? Tôi đã thử ẩn = 'ẩn' và điều này không hoạt động.

Khi ẩn hiện diện như trong phần tử văn bản, nó hoạt động như mong đợi, nhưng khi lớp hộp flex được thêm vào, nó ngừng hoạt động và phần tử vẫn hiển thị.

Nguồn

2014-05-21 st_clair_clarke

Tạo một lớp .hidden với display:none và thêm nó vào lớp div của bạn để thay thế.

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; 
}

Dưới đây là một fiddle làm việc: http://jsfiddle.net/2mNux/3/

Nguồn

2014-05-29 19:47:00

Việc sửa chữa đơn giản nhất là để ghi đè lên toàn bộ hành vi với một selector thuộc tính. Không có thay đổi tài liệu cần thiết:

[hidden]{ 
    display:none; 
}

http://jsfiddle.net/mjxcrrve/

Tôi đoán logic đằng sau hành vi mặc định là để cho phép ghi đè "ẩn" thuộc tính html với CSS. "ẩn" là nhiều hơn hoặc ít hơn một "hiển thị: không có" tiềm ẩn, do đó, việc ghi đè kiểu "hiển thị" là một ứng cử viên tự nhiên. Nhưng tôi đồng ý có vẻ như bị suy nghĩ rằng việc sửa đổi bố cục thuần túy sẽ ảnh hưởng đến khả năng hiển thị.

Nguồn

2017-08-14 13:34:26

này được công việc làm:

[hidden] { 
    display: none !important; 
}

Lưu ý rằng phần !important là điều quan trọng để ngăn chặn việc khai display: none khỏi bị ghi đè bởi mã CSS khác của bạn.

Thông tin thêm: https://meowni.ca/hidden.is.a.lie.html

Nguồn

2018-02-22 20:41:36

tài sản 'ẩn' không làm việc với flex-box

Trả lời

Các vấn đề liên quan