html - flex 盒子不工作

Question

我正在使用 meteor 和 Material Design Lite 开发网络应用。

这是我想做的:

这是窗口太小的结果:

这是更大窗口的结果:

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

首先，您需要提供 id="msg-layout"到 <form> .只有一个 display:flex 的直接 child 布局将获得柔性容器的特殊属性。您通过嵌套 <form> 来否定 flexbox灵活的 child 会在哪里。您的灵活布局只有一个 child ，<form> .

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