vux flexbox使用_如何使用Flexbox构建响应式表单

vux flexbox使用

在本教程中，我们将学习如何利用flexbox创建响应表单。 有趣的是（同时令人兴奋的是）flexbox允许我们在不使用任何媒体查询的情况下构建表单。

在开始之前，让我们看一下我们将要做什么（签出较大的版本以查看表单布局如何变化）：

表格结构

然后，首先，让我们深入研究表单的结构。 我们将其标记如下：

• 我们将使用.flex-outer无序列表对各种表单元素进行分组
• 以及.flex-inner无序列表来对复选框进行分组。
• 几乎所有的表单控件都带有相关的标签。

而已！ 通过仅定义两个无序列表（我们也可以使用有序列表），我们构建了一个非常干净的表单。 看起来是这样的：

<form>
  <ul class="flex-outer">
    <li>
      <label for="first-name">First Name</label>
      <input type="text" id="first-name" placeholder="Enter your first name here">
    </li>
    <li>
      <label for="last-name">Last Name</label>
      <input type="text" id="last-name" placeholder="Enter your last name here">
    </li>
    <li>
      <label for="email">Email</label>
      <input type="email" id="email" placeholder="Enter your email here">
    </li>
    <li>
      <label for="phone">Phone</label>
      <input type="tel" id="phone" placeholder="Enter your phone here">
    </li>
    <li>
      <label for="message">Message</label>
      <textarea rows="6" id="message" placeholder="Enter your message here"></textarea>
    </li>
    <li>
      <p>Age</p>
      <ul class="flex-inner">
        <!-- list items here -->
      </ul>
    </li>
    <li>
      <button type="submit">Submit</button>
    </li>
  </ul>
</form>

注意 ：我们在.flex-inner列表之前使用p元素而不是label元素。 这是因为在这种特殊情况下，使用label标签没有任何意义。 此标记仅应用于将文本标签与表单控件相关联。

这是复选框的标记：

<ul class="flex-inner">
  <li>
    <input type="checkbox" id="twenty-to-twentynine">
    <label for="twenty-to-twentynine">20-29</label>
  </li>
  <li>
    <input type="checkbox" id="thirty-to-thirtynine">
    <label for="thirty-to-thirtynine">30-39</label>
  </li>
  <!-- more list items here -->
</ul>

准备好标记后，无样式的表单如下所示：

这不会是您见过的最奇特的形式，但是可以！ 它的语义，可访问性和可变性； 比任何事物都重要的方面。

至此，我们准备开始对其应用一些样式。

表单样式

让我们从在笔设置中添加normalize和autoprefixer开始：

接下来，我们将确定flex容器。 在我们的例子中，以下要素：

• .flex-outer列表的每个列表项。
• .flex-inner列表，其中包含所有复选框。

此外，我们想使弹性项目在整个横轴上垂直居中。

为了实现此行为，我们设置了一些初始CSS规则：

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

下一步是指定弹性项目的宽度。 我们从.flex-outer列表的flex项目开始。

主要要求：

• 标签的宽度至少应为120px，最大为220px。
• 标签后面的表单元素的宽度至少应为220px。

这给了我们什么？ 当表单的宽度总计至少340px时，每个标签及其关联的表单元素将显示在单个水平行上。 在任何其他情况下，所有表单元素（除了我们稍后将看到的复选框之外）都将垂直堆叠。

注意 ：上述值是任意的-您可以根据需要对其进行修改。

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

提交按钮

最后，对于提交按钮（这也是一个弹性项目），我们定义了一些基本样式：

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

选框

现在让我们设置复选框的样式。 请记住，他们的Flex包装器的最小宽度为220像素。

首先，我们将flex项的宽度设置为100px，它们是复选框的直接父级：

.flex-inner li {
  width: 100px;
}

然后，我们利用justify-content属性将它们在主轴上对齐。 请注意，此属性具有不同的值，但是在此示例中，我们仅对space-between值感兴趣：

.flex-inner {
  justify-content: space-between;
}

此值效果很好，并使我们能够对复选框及其各自的标签进行一致的对齐。 我们应该提到的一件事是，此属性值可能会笨拙地分配最后一行的元素。 在某些视口宽度下，您会看到类似以下内容：

注意最后两个弹性项目的对齐。 如果由于某种原因您不喜欢该布局，并且希望它们彼此相邻出现，则可以尝试如下操作：

• 从Flex包装器中删除justify-content属性。
• 使用百分比为弹性项目添加固定宽度（例如width: 50% ）。
• 使用媒体查询覆盖此宽度。 例如，当视口宽度大于992px时，将flex项目的width: 25%设为width: 25%而不是width: 50% 。

最重要的是，了解以下两点很重要：

• Flexbox为我们提供了极大的灵活性，可快速构建漂亮的表格
• 并且上述所有值对于此特定示例均适用。 对于您自己的设计，您可能需要不同的值。 例如，此处复选框的标签很小，因此，我们为它们的父级指定固定宽度（即100px）。 但是，如果它们的宽度不同，给它们设置flex: 1 100px可能会更聪明flex: 1 100px 。

最终样式

在我们离开之前，让我们添加一些美感，使事物更富于表现力。 在下面的演示中拆分CSS标签，查看添加颜色和间距的位置：

结论

如您所见，通过最少的标记和flexbox的功能，我们设法构建了一个响应式表单。 希望现在，您已经获得了一些有用的知识，可以帮助您构建自己的Flexbox表单。

如果您想更进一步，我面临两个挑战：

翻译自: https://webdesign.tutsplus.com/tutorials/building-responsive-forms-with-flexbox--cms-26767

vux flexbox使用