我正在使用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 {
}
我不明白为什么我的行为不正确,我已经指定只想要一行,并且我的输入框应该自适应大小。
我错在哪里了?
width:blah
,就会抵消flex-direction:row{-reverse}
的好处。使用flex-basis:blah
,这样 flexbox 就可以发挥它的作用。只有在使用flex-direction:column{-reverse}
时才使用width:blah
。 - taystackflex-grow: 1
。这将使输入框填充其余的可用空间。如果其他元素会因此缩小,请给它们设置flex-shrink: 0; flex-basis:{MIN_WIDTH px/em/vw/%...};
。 - taystack