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