弹性盒子不起作用

Question

我正在使用Meteor和Material Design Lite开发Web应用程序。

这是我想要做的：

这是窗口太小的结果：

这是更大的窗口的结果：

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

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

我错在哪里了？

- Mathieu R.

Answer 1

我建议精简内容。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（Sassy CSS）

* { // 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;
    }
}

- sheriffderek

Answer 2

首先，您需要将<form>元素的id="msg-layout"。只有直接子元素才能获得灵活容器的特殊属性，而通过嵌套<form>元素，您正在消除弹性盒子的优势。您的弹性布局只有一个子元素，即<form>元素。

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

- taystack

Answer 3

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

- Garbee

---

一旦使用 width:blah，就会抵消 flex-direction:row{-reverse} 的好处。使用 flex-basis:blah，这样 flexbox 就可以发挥它的作用。只有在使用 flex-direction:column{-reverse} 时才使用 width:blah。 - taystack

他们在想为什么输入框的宽度没有扩展，这就是原因。然而，我提供了错误的目标，现在正在修复。 - Garbee

如果您希望输入框增长，请添加属性：flex-grow: 1。这将使输入框填充其余的可用空间。如果其他元素会因此缩小，请给它们设置 flex-shrink: 0; flex-basis:{MIN_WIDTH px/em/vw/%...};。 - taystack