弹性盒不工作答案

【问题标题】：Flex box not working弹性盒不工作
【发布时间】：2016-05-20 02:40:28
【问题描述】：

我正在开发一个带有流星和材料设计精简版的网络应用程序。

这是我想做的：

这是窗口太小的结果：

这是窗口更大的结果：

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

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

我做错了什么？

【问题讨论】：

标签： html css meteor flexbox material-design-lite

【解决方案1】：

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

【讨论】：

一旦你使用width:blah，你就否定了flex-direction:row{-reverse}的好处。使用flex-basis:blah，这样 flexbox 就可以完成它的工作。如果你有flex-direction:column{-reverse}，你只使用width:blah。
他们想知道为什么输入宽度没有扩大，这就是原因。但是，我确实提供了错误的目标，现在修复它。
如果希望输入增长，只需添加属性：flex-grow: 1。这将使输入填充剩余的可用空间。如果您的其他元素正在缩小，请给他们flex-shrink: 0;flex-basis:{MIN_WIDTH px/em/vw/%...};

【解决方案2】：

我建议减少一些东西。 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;
    }
}

【讨论】：

【解决方案3】：

首先，您需要将id="msg-layout" 提供给<form>。只有display:flex 布局的直接子级才能获得灵活容器的特殊属性。您通过在灵活的孩子所在的位置嵌套 <form> 来否定 flexbox。您的灵活布局只有一个孩子，<form>。

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

【讨论】：