[css]Flex弹性布局详解 [附携程网移动端案例]

目录

一、flex布局体验 

传统布局:

flex弹性布局:

二、flex布局父项常见属性 

1.flex-direction

2.justify-content

 3.flex-wrap

4.align-items(单行)

5.align-content(多行)

三、flex布局子项常见属性 

1.flex属性

2.align-self

 四、携程网移动端案例 ☀️


Flex布局可以说是不论pc端移动端都必须要学会的布局方法,还不明白的同学们赶紧学起来吧

一、flex布局体验

传统布局:

兼容性好
布局繁琐
局限性,不能在移动端很好的布局

flex弹性布局:

操作方便,布局及为简单,移动端应用很广泛
pc端浏览器支持情况较差
IE 11或更低版本,不支持或部分支持

建议:
1.如果是pc端布局,我们还是传统布局。
2.如果是移动端或者不考虑兼容性问题的pc端布局,我们还是使用flex弹性布局

如果我们要进行这个布局

[css]Flex弹性布局详解 [附携程网移动端案例]_第1张图片

并且我们的HTML结构为:

 
    
1 2 3

我们看看传统流式布局和flex布局的区别,这样便于我们体会flex布局的优势

传统布局代码:

html


    
        
        
        
        
        
    
    
        
1 2 3

flex布局代码:



    
        
        
        
        
        
    
    
        
1 2 3

它的效果和传统布局是一样的,并且我们不需要考虑他是块级元素还是行内元素,或者考虑清除浮动等等影响
如果我们要三个span平均分三等份的话,只需要加一句flex:1,也就是:

div span {
    flex:1;
    width: 100px;
    height: 60px;
    background-color: purple;
}

这样就可以轻松的实现平均分三等份了

有没有体验到flex弹性布局的便捷:blush:

二、flex布局父项常见属性

1.flex-direction

flex-direction 设置主轴方向
就是他决定子级元素是横着排列还是竖着排列
默认是 flex-direction:row (横着从左往右排)
在上面的例子中,如果给父级添加 flex-direction:column,子级元素就会竖着排列:

[css]Flex弹性布局详解 [附携程网移动端案例]_第2张图片

 代码:

div {
        display: flex;
        width: 500px;
        height: 200px;
        background-color: pink; 
        flex-direction: column;
}

2.justify-content

justify-content 设置主轴上的子元素排列方式
默认为: justify-content:flex-start;  (从头开始排,贴着左边对齐)

如果想贴着右边对齐就是:

 justify-content:flex-end;

如果想沿着主轴居中对齐就是:

 justify-content:center;

这样我们实现让父盒子里的子盒子水平居中对齐就非常的方便了

平均分配剩余空间:

 justify-content:space-around;

[css]Flex弹性布局详解 [附携程网移动端案例]_第3张图片

先两边贴边,再平分剩余空间:

justify-content:space-between;

[css]Flex弹性布局详解 [附携程网移动端案例]_第4张图片

3.flex-wrap

[css]Flex弹性布局详解 [附携程网移动端案例]_第5张图片

我们先创建一个粉色的大盒子里面通过flex布局把四个紫色的小盒子排列在一行显示

相关代码如下:



    
        
        
        
        
        
    
    
        
1 2 3 4

在这个例子中我们有四个span,如果有五个呢,很明显一行放不开,他会另起一行么?
我们再添加一个span元素,并运行代码:[css]Flex弹性布局详解 [附携程网移动端案例]_第6张图片

 他并没有换行显示,而且让紫色盒子本来的宽度变小了
这是因为,在flex布局中,默认的子元素是不换行的,如果装不开,则会缩小子元素的宽度
flex-wrap 属性默认不换行
若想换行显示,则在父类中添加:
 flex-wrap:wrap;
在上例中添加此语句后:[css]Flex弹性布局详解 [附携程网移动端案例]_第7张图片

 这样就可以在不改变子盒子的条件下自动换行显示了

4.align-items(单行)

设置侧轴上的子元素排列方式(单行)
如果我们想让上例中的子元素在父盒子里居中对齐(水平,竖直方向均居中),应该怎么办呢?

修改一下子盒子(紫色)的父级(粉色)盒子的样式:

div {
            display: flex;
            width: 500px;
            height: 200px;
            background-color: pink; 
            justify-content: center; /*主轴居中*/
            align-items: center; /*侧轴居中*/
}

 注意:这里是给父级添加样式,而不是给需要居中的盒子本身 

[css]Flex弹性布局详解 [附携程网移动端案例]_第8张图片

 这样我们就实现了侧轴居中的效果

5.align-content(多行)

设置侧轴上的子元素的排列方式(多行)
只能运用于子项出现换行的情况,在单行下是没有效果的

属性 说明
flex-start 默认在侧轴头部开始排列
flex-end 在侧轴尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间
stretch 设置子项元素平分父元素高度

三、flex布局子项常见属性

1.flex属性

flex属性定义子项分配剩余空间,用flex来表示所占的份数
如果我们想让下面四个紫色盒子平分父盒子的宽应该怎么做:[css]Flex弹性布局详解 [附携程网移动端案例]_第9张图片

 最关键的就是在子盒子样式里加入 flex:1 表示每个子盒子元素占一份

2.align-self

如果我们想让第三号盒子下来,应该怎么做呢?
用我们之前学的align-items:flex-end;能够实现么?
align-items 用来给父项设置,这样的话子项的四个元素会一起下来,不能做到让指定元素下来的效果

所以我们只需给第三个span元素添加 align-self:flex-end; 就能够实现想要的效果了

[css]Flex弹性布局详解 [附携程网移动端案例]_第10张图片

 四、携程网移动端案例

实现效果:

[css]Flex弹性布局详解 [附携程网移动端案例]_第11张图片

 index.html:



    
        
        
        
        
        携程在手,说走就走
    
    
        
        
我 的

index.css:

* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
}
@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?7kkyc2');
    src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
        url('fonts/icomoon.woff?7kkyc2') format('woff'),
        url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;    
}
body {
    background-color: rgb(231, 241, 245);
}
.search-index {/*顶部右部分固定大小盒子,搜索框部分自适应用flex布局*/
    /*固定定位跟父级无关,他以屏幕为准*/
    display: flex;
    position: fixed;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);/*定位的盒子居中方法,往左走自身宽度一半*/
    width: 100%;/*固定的盒子应该有宽度*/
    min-width: 320px;
    max-width: 540px;
    height: 44px;
    background-color: #F6F6F6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.search {
    flex: 1;
    height: 26px;
    border: 1px solid #ccc;
    line-height: 24px;/*c3盒模型,要减去边框*/
    margin: 8px 10px;
    border-radius: 5px;
    font-size: 15px;
    color: #666;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
}
.search::before {
    float: left;
    content: "";
    display: block;/*转换为块级元素*/
    width: 23px;
    height: 23px;
    background: url(12.jpg) no-repeat;
    background-size: 23px auto;
    margin-right: 10px;
}
a {
    text-decoration: none;
    color: #222;
}
.user {
    width: 44px;
    height: 44px;
    font-size: 10px;
    text-align: center;
    color: #2eaae0;
}
.user::before {
    content: "";
    display: block;
    width: 30px;
    height: 25px;
    background: url(45.png) no-repeat -3px -410px;
    background-size: 34px auto;
    margin: 2px auto 0;
}
.focus {
    position: relative;
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    padding-top: 44px;
    z-index: -1;
}
.focus img {
    display: block;
    width: 100%;
}
.focus .lunbo {
    display: flex;
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 10px;
    justify-content: space-around;
    align-items: center;
}
.focus .lunbo .circle {
    width: 8px;
    height: 8px;
    background-color: #ccc;
    background: rgba(0, 0, 0, .2);
    border-radius: 50%;
}
.focus .lunbo .circle:first-child {
    background-color: #666;
}
/*局部导航栏*/
.local-nav {
    display: flex;
    height: 64px;
    min-width: 320px;
    max-width: 530px;
    margin: 0 auto;
    margin-top: 3px;
    background-color: #fff;
    border-radius: 8px;
}
.local-nav ul {
    margin: 0;
    padding: 0;
}
.local-nav li {
    flex: 1;
    list-style: none;
    color: #fff;
}
.local-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
}
.local-nav li [class^="local-nav-icon"] {
    width: 32px;
    height: 32px;
    background: url(45.png) no-repeat -2px -478px;
    background-size: 34px auto;
    margin-top: 5px;
}
.local-nav li .local-nav-icon-icon2 {
    background-position: -2px -240px;
}
.local-nav li .local-nav-icon-icon3 {
    background-position: -2px -137px;
}
.local-nav li .local-nav-icon-icon4 {
    background-position: -2px 0px;
}
/*nav*/
nav {
    overflow: hidden;
    min-width: 320px;
    max-width: 530px;
    margin: 0 auto;
    margin-top: 3px;
    border-radius: 8px;
}
.nav-common {
    display: flex;
    height: 88px;
    background-color: pink;
}
.nav-common:nth-child(2) {
    margin: 3px 0;
}
.nav-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    line-height: 44px;
}
.nav-items a {
    flex: 1;
    color: #fff;
    font-size: 15px;
    text-shadow: 1px 1px rgba(0, 0, 0, .2);
}
.nav-items a:first-child {
    border-bottom: 1px solid #fff;
}
.nav-items:nth-child(1) a {
    border: 0;
    background: url(45.png) no-repeat 45px -1090px;
    text-shadow: 1px 1px rgba(0, 0, 0, .4);
    background-size: 84px auto;
}
.nav-items:nth-child(-n+2) {
    border-right: 2px solid #fff;
}
.nav-common:nth-child(2) .nav-items:nth-child(1) a {
    background: url(45.png) no-repeat 45px -497px;
}
.nav-common:nth-child(3) .nav-items:nth-child(1) a {
    background: url(45.png) no-repeat 45px -409px;
}
.nav-common:nth-child(1) {/*背景渐变做法*/
    background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
}
.nav-common:nth-child(2) {
    background: -webkit-linear-gradient(left,#4B90ED,#53BCED);
}
.nav-common:nth-child(3) {
    background: -webkit-linear-gradient(left,#34C2A9,#6CD559);
}
.subnav-entry {
    display: flex;
    min-width: 320px;
    max-width: 530px;
    margin: 0 auto;
    margin-top: 3px;
    border-radius: 8px;
    background-color: #fff;
    flex-wrap: wrap;
    padding: 5px 0;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
}
.subnav-entry li {
    /*里面的盒子可以写%相对于父级来说*/
    list-style: none;
    flex: 20%;
}
.subnav-entry a {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.subnav-entry-icon {
    width: 28px;
    height: 28px;
    margin-top: 4px;
    font-family: "icomoon";
    font-size: 25px;
}
.final {
    font-size: 12px;
}
.sales-box {
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    margin-top: 3px;
    border-radius: 8px;
}
.sales-box img {
    width: 100%;
}
.footer {
    display: flex;
    min-width: 320px;
    max-width: 540px;
    height: 35px;
    margin: 0 auto;
    margin-top: 5px;
    background-color: #fff;
    text-align: center;
    line-height: 35px;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}
.footer a {
    display: block;
    height: 35px;
    flex: 1;
    text-shadow: 1px 1px rgba(0, 0, 0, .2);
    font-size: 14px;
}

通过这个案例大家可以对flex布局有了新的认识,并且对其他的css知识点的综合运用也能融会贯通

希望看到这里的同学们能够给个关注 :stuck_out_tongue_winking_eye:

 

你可能感兴趣的:(web前端实战项目,css,前端,css3,html5)