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

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