小编vid*_*zer的帖子

输入/按钮元素不会在Flex容器中缩小

在Flex容器中使用输入和按钮元素时,flex和/或flex-grow属性似乎没有做任何事情.

代码,演示我的问题.

button,
input {
  font-size: 1rem;
}

button {
  border: none;
  background-color: #333;
  color: #EEE;
}

input {
  border: 1px solid #AAA;
  padding-left: 0.5rem;
}

.inputrow {
  width: 30rem;
  display: flex;
  margin: 0 -.25rem;
}

.inputrow>* {
  margin: 0 .25rem;
  border-radius: 2px;
  height: 1.75rem;
  box-sizing: border-box;
}

.nickname {
  flex: 1;
}

.message {
  flex: 4;
}

.s-button {
  flex: 1;
}
Run Code Online (Sandbox Code Playgroud)
<div class="inputrow">
  <input type="text" class="nickname" placeholder="Nickname">
  <input type="text" class="message" placeholder="Message">
  <button type="submit" class="s-button">Submit</button> …
Run Code Online (Sandbox Code Playgroud)

html css css3 flexbox

32
推荐指数
3
解决办法
1万
查看次数

标签 统计

css ×1

css3 ×1

flexbox ×1

html ×1