Question

我使用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>

为什么lab-flex-col类的存在会阻止隐藏文本输入？我试过隐藏='隐藏'，这也不起作用。

当textarea元素中存在hidden时，它会按预期工作，但是一旦添加了flex-box类，它就会停止工作并且元素仍然可见。

Answer 1

使用.hidden创建一个display:none类，然后将其添加到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/

Answer 2

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

[hidden]{
  display:none;
}

http://jsfiddle.net/mjxcrrve/

我猜测默认行为背后的逻辑是允许用CSS覆盖“隐藏”的html属性。 “隐藏”或多或少是隐含的“显示：无”，因此覆盖“显示”样式是一个自然的候选者。但我同意，修改纯布局会影响可见性，这似乎是错误的考虑。

Answer 3

这可以完成工作：

[hidden] {
    display: none !important;
}

请注意，!important部分对于防止display: none声明被其他CSS代码覆盖非常重要。

更多信息：https://meowni.ca/hidden.is.a.lie.html

Answer 4

对于使用聚合物的iron-list的用户来说，这只是一个提示，如果该项目的模板包含一个flexbox div，例如：

<template>
    <div class="layout vertical">Your content</div>
</template>

只需将弹性div换成另一个，就像这样：

<template>
    <div>
         <div class="layout vertical">Your content</div>
    </div>
</template>

所以现在，iron-list将隐藏在外部div上，并且该行将以正确的方式消失。

通过使用

[hidden] {
    display: none !important;
}

行将是不可见的，但是仍然可以滚动到空白处，而不是预期的行为。

'hidden'属性不适用于flex-box

4 个答案: