弹性盒子不工作

Question

我正在使用 meteor 和 material design lite 开发网络应用程序。

这是我想要做的：

这是 window 太小的结果：

这是更大 window 的结果：

HTML代码：

<template name="myRefrigerator_header">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <!-- Title -->
      <span class="mdl-layout-title">My Refrigerator</span>
      <!-- Add spacer, to align navigation to the right -->
      <div class="mdl-layout-spacer"></div>
    </div>
    <!-- Simple Textfield -->
    <div id="msg-layout">
      <form action="#">
        <div  class="mdl-textfield mdl-js-textfield" id="msg-layout-content">
          <input class="mdl-textfield__input" type="text" name="content">
          <label class="mdl-textfield__label" for="sample1">Text...</label>
        </div>
        <button class="mdl-button mdl-js-button mdl-button--primary"
          id="msg-layout-add-button">
          Enregistrer
        </button>
      </form>
    </div>
  </header>
</template>

并且 CSS 应用于它：

#msg-layout {
  background-color: #F5F5F5;
  margin: 0px 25px 15px 25px;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
}

#msg-layout-content {
  color: #3F51B5;
  flex: 1 1 0;
}

#msg-layout-add-button {
}

我不明白为什么我没有正确的行为，我已经指定我只想要一行并且我的输入应该调整大小。

我哪里错了？

Answer 1

由于动画限制，mdl-textfield__inputclass的设置宽度为300px。您需要覆盖它（例如 width: 100%）以获得可扩展的文本字段。但是，这可能会对动画产生不利影响，因为 CSS 动画不喜欢未知长度。

Answer 2

首先，您需要将 id="msg-layout" 交给 <form>。只有 display:flex 布局的直接子级才能获得灵活容器的特殊属性。您通过嵌套 <form> 来否定 flexbox，其中将包含灵活的子项。您的灵活布局只有一个子布局，即 <form>.

这是我找到的学习 flex-box 的最佳资源 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

我建议精简一下。 Flex-box 不是问题，更多的是样式规则库做出了很多假设 - 你可能无法从顶部看到。

这是精简版/http://codepen.io/sheriffderek/pen/MKzMgp

HTML

<form class='this-form' action='#'>
    <label class='input-w' for='sample1'>
        <input type='text' id='sample1'>
        <span>Text...</span>
    </label>
    <button>Enregistrer</button>
</form>

SCSS

* { // reset box model
    box-sizing: border-box;
}

.this-form {
    display: flex; // a
    flex-direction: row; // b
    align-items: center; // d
    max-width: 24rem;
    padding: .5rem;
    border: 1px solid blue;
    .input-w {
        position: relative;
        flex-grow: 1; // c 
        input {
            width: 100%;
            border: 0;
            border-bottom: 1px solid gray;
            &:focus {
                outline: none;
                + span {
                    transform: translate(0, -50px);
                    opacity: 0;
                }   
            }
        }
        span {
            position: absolute;
            bottom: 3px;
            left: 0;
            color: gray;
            font-size: 12px;
            transition: 1s;
        }
    }
    button {
        height: 30px;
        background: transparent;
        border: 0;
        color: blue;
        margin-left: .5rem;
    }
}

弹性盒子不工作

Flex box not working

html

css

flexbox

meteor

material-design-lite