Flexbox 布局是最简单的表单教程，10 分钟即可学会

简单的 Flexbox 表单布局只需 10 分钟即可学会。

1。 元素

该表单使用 元素。

<form></form>

以上为空表格。根据 HTML 标准，这是一个块级元素，默认情况下采用全宽，但由于没有内容，因此高度为 0。

2。表单控件

现在添加两个最常用的表单控件。

<form>
  <input type="email" name="email">
  <button type="submit">Send</button>
</form>

在上面的代码中，表单包含一个输入字段 () 和一个按钮 ()。

根据标准，这两个控件是内联块元素（inline-block），即默认情况下它们彼此相邻排列在同一行中。

上图是浏览器默认显示的这种形式（颜色除外）。可以看到两个控件之间有3-4像素的间隙，这是由浏览器内置样式决定的。

3。指定 Flexbox 布局

然后输入用于使用 Flexbox 布局的表单。

form  {
  display: flex;
}

如您所见，两个控件之间的间隙消失了，因为弹性布局元素默认没有间隙。

4。 flex-grow 属性

有两件事值得注意。

（1）两个控件的宽度不会改变，因为flex布局默认不会改变元素的宽度。

(2) Flex布局默认是对齐的，所以两个控件会从行首开始排列。

如果我们希望输入字段占据当前行的整个剩余宽度，只需将值1指定为输入字段的flex-grow属性即可。

input  {
  flex-grow: 1;
}

上图中，按钮的宽度没有改变，但是输入字段变宽了，等于当前行的宽度减去按钮的宽度。

flex-grow属性的默认值为0，这意味着它使用原始宽度并且不拉伸。如果等于1，则表示元素的宽度被拉伸以占据当前行的整个剩余宽度。

5。 align-self 属性和align-items 属性

让我们稍微改变一下，并将图像插入到按钮中。将

<form action="#">
  <input type="email" placeholder="Enter your email">
  <button type="button"><svg>  <!-- a smiley icon -->  </svg></button>
</form>

按钮插入图像后，其高度会发生变化并变高。这时，一件非常奇妙的事情发生了。

上图中，按钮会变高，输入字段会自动变得相同高度！

如前所述，Flex 布局默认情况下不会更改元素的宽度，但会默认更改元素的高度。如果元素没有明确指定高度，它将占据容器的整个高度。 在本例中，按钮会更高，从而使表单元素更高，这将自动扩展输入字段的高度。

align-self 属性可以更改此行为。

input {
  flex-grow: 1;
  align-self: center;
}

align-self 属性可以采用四个值。

• flex-start：顶部边缘对齐，高度未拉伸
• flex-end：底部边缘对齐，高度未拉伸

  
  form  {
    display: flex;
  }
  

  

  居中，高度

  
  form  {
    display: flex;
  }
  

  

  拉伸：默认值，高度会自动拉伸

如果元素较多，很难一一设置 align-self 属性。目前，您可以在容器元素（本例中为表单）上设置 align-items 属性，其值将由所有 align-self 属性继承。子项目。

form {
  display: flex;
  align-items: center;
}

在上面的代码中，在 元素设置 align-items 后，无需将 f 控件与 f 控件对齐，除非您两者都想要。价值观不同。