CSS3——flex布局_css flex布局换行50%

---

---

前言

网页开发过程中我们经常遇见那种排列规整的布局，这个时候可以考虑用flex来实现，这样就更加的方便快捷。本章将制作两个实例：搜索栏和菜单来讲解flex布局。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、flex布局是什么？

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局，例如下面这种规规矩矩的布局。

二、如何使用flex?

1.搜索栏

如下图，左边搜索框，右边登录框。

通常情况下，我们会使用绝对定位将右边的登录图标定位在右边，但使用felx更加的简单。
本章主要讲flex，所以其他步骤省略。

html5部分代码如下：

<nav>
    <div class="searchIput">
        请输入目的地/酒店/景点/航班号
    </div>
    <a href="" class="userPic">我的</a>
</nav>
1
2
3
4
5
6

这里的搜索栏点击后跳转到另一个页面，所以用样式来写了。
CSS3部分代码如下：

nav{
    display: flex;
    position: fixed;/*固定定位*/
    top:0;
    left: 50%;
   transform: translateX(-50%);/*translate相当于盒子得自身长度，即盒子自身得长度在X轴上移动-50%*/
    -webkit-transform: translateX(-50%);/*兼容老版本得谷歌浏览器*/
    width: 100%;/*固定得盒子一定要有高度*/
    height:64px;
}
.searchIput{
    flex: 1;/*搜索栏占剩余的100%*/
    height: 64px;
    line-height: 64px;
    margin: auto 8px;
    padding-left: 70px;
    border: 1px solid #d0d0d0;
    box-shadow: 0 2px 0 #d0d0d0;
    background: #ffffff;
    border-radius: 10px;
    font-size: 26px;
}
.searchIput:before{
    content: '';
    position: absolute;
    top: 15px;
    left: 30px;
    display: block;
    width:40px;
    height: 40px;
    background-size: 100% 100%;
    background-image: url("../images/search.png") ;
}
.userPic{
    color: #0F52BA;
    text-decoration: none;
    text-align: center;
    padding: auto 20px;
    font-size: 18px;
}
.userPic:before{
    content: '';/*不能省略*/
    display: block;
    width: 46px;
    height: 46px;
    background-size: 100% 100%;
    background-image: url("../images/login.png") ;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

总结

以上就是今天要讲的内容，本文仅仅简单介绍了flex的使用，当然这些属性不可能全部记住完，多尝试几次增强印象吧！