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

  • 2020 年 2 月 26 日
  • 笔记

大家好，今天我将和大家一起动手做个练习，使用 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;  }

小节

到这里，本示例就完成了，我们用最少最简单的方式使用 flexbox 布局完成了响应式表单的创建，大家可以访问以下网址，在线体验效果：

https://www.qianduandaren.com/demo/flexform/

最后分享给大家一张图，方便大家记忆和学习弹性盒子布局。

VirMach 便宜 VPS

QNews

QNews