Flex не работает

Question

Я разрабатываю веб-приложение с метеорным и материальным дизайном.

Вот что я хочу сделать:

Вот результат со слишком маленьким окном:

И вот результат с большим окном:

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 получат специальные атрибуты гибких контейнеров. Вы отрицаете flexbox, вложив <form>, где будут гибкие дети. В вашем гибком макете есть только один ребенок, <form>.

Это лучший ресурс я нашел для обучения Flex-Box https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

Класс mdl-textfield__input имеет заданную ширину 300 пикселей из-за ограничений анимации. Вам нужно переопределить это (скажем width: 100%), чтобы получить расширяемое текстовое поле. Однако это может негативно сказаться на анимации, поскольку анимации CSS не любят неизвестные длины.

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