动手练一练，使用 Flexbox 创建一个响应式的表单

原创

前端达人

修改于 2020-02-26 08:47:06

9630

修改于 2020-02-26 08:47:06

大家好，今天我将和大家一起动手做个练习，使用 Flexbox 布局创建一个响应式的表单，本篇文章不会和大家生硬的去介绍 Flexbox 知识点，而是通过实践的形式去理解 Flexbox 布局。刚学前端时，大家会不会觉得CSS太容易了，没有过多实践，就开始上手实践JS和相关的前端框架了，一遇到一些样式的问题，就开始慌了，无从下手。CSS学好用好，也是需要花功夫的，不要因为CSS简单了，就轻视了，毕竟作为一个专业的前端，要给大家呈现产品美感，更多考验的是 CSS 的功底。

表单项目长啥样？

好了，给大家唠叨多了，让我们回到本节的案例，虽然例子简单，但是要做漂亮了，是需要花功夫的，这里我们不使用媒介查询属性，完全使用 Flexbox 布局就能创建一个完美的响应式表单，在动手之前，我们来看看，我们例子长什么样？

创建表单 HTML 结构

好了，基于上面的长相，我们开始动手创建表单的 HTML 结构：

创建 .flex-outer 无序列表包裹整个表单元素。
接着在内部创建 .flex-inner 无序列包裹复选表单元素。
几乎所有的表单都有其对应的 label 元素，方便扩大表单元素的点击区域。

仅此而已，我们通过定义了两个无序列表创建了一个简单表单结构，示例代码如下：

<div class="container">
 <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>
</div>

接下来我们创建 .flex-inner 元素及年龄选择部分，示例代码如下：

<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>

完成以上结构后，我们的页面长这样：

基本的模样有了，我们需要借助CSS进行美化，长这样，我们怎么好意思拿的出手。

定义表单样式

1、接下来，我们来定义 flex 容器，在这个例子中，我们在以下元素进行应用：

.flex-outer 列表中的元素
在 .flex-inner 的 checkboxes 元素

此外，我们需要让这些弹性元素在 cross-axis 轴方向垂直居中，并支持溢出换行：

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

2、接下来我们来定义弹性盒子的宽度，我们先从定义 .flex-outer 列表的元素开始。

我们的需求是这样的：

每个 labels 的宽度至少为120px, 最多为220px。
每个表单元素的宽度至少为220px

通过这个需求，我们应该明确表单宽度至少为340px, lable 与对应的表单元素水平并排显示。

上述的值，你可以根据自己的需求自行修改

最终我们完成后的代码如下所示：

.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;
}

处理 Checkboxes 的样式

接着我们继续处理复选框 Checkboxes 的样式，在定义基础表单样式时，我们设置了.flex-inner 容器的最小宽度为220px。

1、首先我们来处理下每个 Checkbox 的宽度，设置其父元素 li 标签的宽度为100px:

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

2、接着我们来使用 justify-content 属性来定义元素在 main-axis 的显示方式，这里我使用了 space-between 对齐方式。

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

使用这个属性，能让我们很好的均匀的对齐元素，唯一不足时，每行项目不相等时，最后一行的对齐方式也许不是你期望看到的。

如上图所示，也许你希望最后两个元素相邻显示，不是分的这么开，我么该如何做呢？

首先移除 justify-content 的对齐属性
修正每个弹性盒子的宽度，比如宽度为50%
使用媒介查询器，当屏幕宽度大于 992px 时，我们添加弹性盒子的宽度，让其宽度为25%。

通过以上学习，我们有两点需要明确的是：

flex 布局为我们提供了极大的灵活性，让我们可以快速的构建漂亮表格。
上述CSS具体的值只是适用本示例，你可以根据自己的需求进行调整。例如，我们这里的年龄复选框定义的宽度很小，才100px, 如果他们的宽度不同的话，你可以使用 flex: 1 100px 来定义宽度，弹性盒子能足够智能化的处理对齐问题。

最终完成的样式

完成上述基本的架子后，我们需要让表单更加漂亮些，比如添加样式，定义文字大小、盒子的内间距、宽度等，由于文章篇幅有限，这里就不过多介绍了，最终完成的 CSS 代码如下所示：

body {
  font: normal 18px/1.5 "Fira Sans", "Helvetica Neue", sans-serif;
  background: #3AAFAB;
  color: #fff;
  padding: 50px 0;
}

.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

.container * {
  box-sizing: border-box;
}

.flex-outer,
.flex-inner {
  list-style-type: none;
  padding: 0;
}

.flex-outer {
  max-width: 800px;
  margin: 0 auto;
}

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

.flex-inner {
  padding: 0 8px;
  justify-content: space-between;  
}

.flex-outer > li:not(:last-child) {
  margin-bottom: 20px;
}

.flex-outer li label,
.flex-outer li p {
  padding: 8px;
  font-weight: 300;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.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 p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  padding: 15px;
  border: none;
}

.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-inner li {
  width: 100px;
}