Question

我有一个简单的内联形式。

<form>
 <span>Signup to our list!</span>
 <input type="email" placeholder="your email address">
 <input type="submit" value="Subscribe">
</form>

我想使用flexbox来均匀地分隔元素。然后当屏幕尺寸变得太小时，将元素包装到它们自己的行上，居中。

我已经在这里开始了：http://codepen.io/magician11/pen/PPvVRv

目前问题是：

他们不会自行换行，
元素之间没有间距
我不确定如何将元素包裹起来

Answer 1

演示中的这行代码......

input[type="email"] {
  flex: 2 0 18rem;
}

...告诉input元素拉伸容器的完整可用宽度。所以当发生这种情况时，线路上没有空间，你的三个项目排成一行，中间没有空格。

有几种方法可以改变此行为以在元素之间创建空间。一种简单的方法是从上面的代码中删除flex-grow: 2因子。试试这个：

input[type="email"] {
  flex: 0 1 60rem; /* don't grow, shrink proportionally, start at 60rem width */
}

对于要包装的项目，您需要允许容器在高度上增长，以便它可以容纳新的项目行：

form {
  padding: 1rem;
  border-radius: 8px;
  background-color: orange;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 30px; /* new; value for demo purposes only */
}

要将项目置于包装中心，您可以使用媒体查询：

@media screen and ( max-width: 1000px ) {
  form { justify-content: center; }
}

DEMO

更新（根据评论）

当它包装时，如何在元素之间创建垂直空间？

一种简单的方法是在弹性项目之间应用margin。

@media screen and ( max-width: 1000px ) {
     form { justify-content: center; }
     form > * { margin-bottom: 15px; }
}

DEMO

Answer 2

解决方案http://codepen.io/gmrash/pen/KdLOZJ

<form>
  <span>Signup to our list!</span>
  <input type="email" placeholder="your email address">
  <input type="submit" value="Subscribe">
</form>

form {
  padding: 1rem;
  border-radius: 8px;
  background-color: orange;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

span {
  flex: 0 0 8rem;
  margin-right: 10px;
}

input[type="email"] {
  flex: 2 1 18rem;
}

input[type="submit"] {
  flex: 0 0 8rem;
  margin-left: 10px;
}

Answer 3

这适合你吗？ JSfiddle
刚刚将flex-shrink和flex-grow删除为输入。

如何使用flexbox创建响应式表单？

3 个答案:

解决方案http://codepen.io/gmrash/pen/KdLOZJ