Flex布局实战（五）

        今天小编主要是讲解输入框布局，这个也是小编的偷懒，所以在实战顺序中遗漏了，而且小编的偷懒导致上一篇的标题也没有更新，与前面的文章标题重复，所以小编决定，后期的问题必须以认真严谨的态度来完成。

        好了，先不扯蛋了，直接进入主体，输入框布局。此篇文章小编打算已最常见的两个实例来讲解如何实现。

• 百度首页搜索控件

• 淘宝登录控件-用户和密码控件

开始讲解输入框布局

        今天讲解的方式依然和前面的方式有些相似，先上传对应的效果图，然后通过讲解实现的思路，在使用Flex布局继续实现。

功能效果图

1.百度首页搜索控件：

2.淘宝登录控件-用户和密码控件：

针对上面的效果图，只实现红色框的效果，即当前主体，输入框布局。

实现

1.百度首页搜索控件：

实现思路：(元素分解化，到最小元素)

1.从整体上先画一个Div容器，如图红色框，设置class为container

2.在红色框中存在两个元素，分别使用绿色的两个框（针对container容器来说，此两个元素为项目，分别设置为class为search和btn），如图为（输入框+照相图标）和百度一下按钮

3.考虑到第一个绿色框中使用两个元素，分别为输入框和图标（针对第二步中class为search的容器而已，分别设置输入框为class为input和bar两个项目）。

有了上面的思想，我们开始实现布局：

实现代码：

2.淘宝登录控件-用户和密码控件：

实现思路：(元素分解化，到最小元素)

1.从整体上先画一个Div容器，如图红色框，设置class为container

2.在红色框中存在两个元素，分别使用绿色的两个框（针对container容器来说，此两个元素为项目，分别设置为class为username和password），如图为用户名和密码

3.针对class为username的用户名框而言，包括蓝色框中使用两个元素，分别为图标和输入框，分别设置输入框为class为userinput和userbar两个项目。

4.与第三步一样，只是定义class不同而已。

有了上面的思想，我们开始实现布局：

实现代码：

结尾

          是不是看完后，有想自己做的冲动了，大家可以尝试的实现下，通过Flex布局，会发现很多场景都可以实现的。大家也可以有问题或者实现过程中有不清楚的地方都可以留言给小编。

                      未完

今天就到这里，下一篇圣杯布局