移动端布局-flex布局

传统布局：兼容性好、布局繁琐、局限性,不能再移动端很好的布局。

flex弹性布局

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

1.如果是PC端页面布局,我们还是传统布局。

2.如果是移动端或者不考虑兼容性问题的PC端页面布局, 我们还是使用flex弹性布局。

一 布局原理

flex是flexible Box的缩写,意为”弹性布局” ,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局，行内元素也可以指定高度和宽度

  • 当我们为父盒子设为 flex布局以后,子元素的float、clear 和vertical-align属性将失效。

  • 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用Flex布局的元素,称为Flex容器( flex container) , 简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目( flex item) , 简称”项目”。Flex项目( flex item)可以横向排列也可以纵向排列。

image-20200504213903351

总结flex布局原理: 就是通过给父盒子添加flex属性,来控制子盒。

二 常见父项属性

以下由6个属性是对父元素设置的：

  • flex-direction :设置主轴的方向

  • justify-content: 设置主轴上的子元素排列方式

  • flex-wrap :设置子元素是否换行

  • align-content :设置侧轴上的子元素的排列方式(多行)

  • align-items :设置侧轴上的子元素排列方式(单行)

  • flex-flow :复合属性,相当于同时设置了flex- direction和flex-wrap

2.1 flex-direction设置主轴的方向★

1.主轴与侧轴

在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和y轴

  • 默认主轴方向就是x轴方向,水平向右

  • 默认侧轴方向就是y轴方向,水平向下

image-20200504214436220

2.属性值

flex-direction属性决定主轴的方向(即项目的排列方向)

注意：主轴和侧轴是会变化的,就看flex-direction设置谁为主轴，剩下的就是侧轴，我们的元素是跟着主轴来排列的。

1
flex-direction: column;
image-20200504215045652
2.2 justify-content设置主轴上的子元素排列方式★

justify-content 属性定义了项目在主轴上的对齐方式

注意:使用这个属性之前一定要确定好主轴是哪个。

1
2
/* 先两边贴边， 在分配剩余的空间 */
justify-content: space-between;
image-20200504215542625
2.3 flex-wrap设置子元素是否换行★

默认情况下,项目都排在一条线(又称“”轴线”) 上。flex-wrap属性定义 , flex布局中默认是不换行的。

flex布局中，默认的子元素是不换行的， 如果装不开，会缩小子元素的宽度，放到父元素里面。

1
2
flex-wrap: nowrap; 
flex-wrap: wrap;
image-20200504220431221
2.4 align-items设置侧轴上的子元素排列方式(单行)★

该属性是控制子项在侧轴(默认是y轴)上的排列方式，在子项为单项的时候(父盒子只有一行)使用。

1
2
3
/* 拉伸，但是子盒子不要给高度 */
align-items: stretch; 
align-items: center;
image-20200504221021523
2.5 align-content 设置侧轴上的子元素的排列方式(多行)

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

1
2
3
4
5
6
/* 换行 */
flex-wrap: wrap;
/* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用 align-content */
align-content: flex-start; 
align-content: center; 
align-content: space-between;
image-20200505092331912

align-content 和align-items区别

  • align-items适用于单行情况下，只有上对齐、下对齐、居中和拉伸

  • align-content 适应于换行(多行)的情况下(单行情况下无效) .可以设置上对齐、下对齐、 居中、拉伸以及平均分配剩余空间等属性值。

  • 总结就是单行找align-items多行找align-content

image-20200505092831458
2.6 flex-flow

flex-flow 是设置主轴方向和是否换行（换列）简写

1
2
3
4
/* flex-direction: column;
flex-wrap: wrap; */
/* 把设置主轴方向和是否换行（换列）简写 */
flex-flow: column wrap;

三、 flex布局子项常见属性

3.1 flex-grow 属性★

flex属性定义子项目分配剩余空间,用flex来表示占多少份数。

1
2
3
.item {
	flex: <number>; /* default 0 */
}

如果想要一行等分多份，每一份都不设置宽度，父元素设置flex布局，子元素使用flex设置剩余空间的份数。

1
2
3
4
5
6
7
8
9
10
11
12
p {
    display: flex;
    width: 60%;
    height: 150px;
}

p span {
	flex: 1;
}
p span:nth-child(2) {
    flex: 2;//一共有3个盒子，第二个盒子占2/4
}
flex-grow
3.2 align-self控制子项自己在侧轴上的排列方式

align- self属性允许单个项目有与其他项目不一样的对挤方式,可覆盖align-items属性。默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch,

1
2
3
4
span:nth-chi1d(2) {
	/*设置自己在侧轴上的排列方式*/
	align-self: flex-end;
}
3.3 order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0。

z-index是改变了html结构，order是利用了css。

1
2
3
4
div span:nth-child(2) {
    /* 默认是0   -1比0小所以在前面 */
    order: -1;
}
3.4 flex-shrink

定义项目的缩小比例，默认值为1。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。

如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-shrink

3.5 flex-basis —— 最小尺寸

定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。默认值为auto，即项目本来的大小。

可以设置为跟width和height属性一样的值，即项目占据固定空间。

3.6 flex综合属性

是flex-grow，flex-shrink 和flex-basis 的缩写，默认值为0，1，auto。

四 flex 布局的一些问题

  • 默认情况下每个 flex-item 的横轴高度是一样的(因为 align-item默认是 start，修改这个属性就可以)，也就是content 内容的高度也是一样的
  • flex-grow 和 justify-content 一起使用需要注意
  • flex 简写包括：flex-grow、flex-shrink、flex-basis。，
1
2
3
4
5
6
7
8
9
10
11
//flex 是数字
flex: 2;
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 0%;
    
//flex 是百分数
flex: 30%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 30%;

7.背景线性渐变

image-20200505113450513

起始方向可以是:方位名词或者度数，如果省略默认就是top，渐变轴默认是从上到下，第一个属性是设置渐变轴，可以使方位词和度数，后面的属性是设置渐变颜色，每个颜色后面可以跟百分比的宽度或高度。

语法1 :

1
2
3
4
5
6
7
8
9
background: -webkit-linear-gradient(left, red, blue); 
background: -webkit-linear-gradient(red, blue);
background: -webkit-linear-gradient(top left, red, blue);

/* 从右下到左上、从蓝色渐变到红色  */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

背景渐变必须添加浏览器私有前缀

1
background:-webkit-gradient(linear,left top,right top,from(#ffbc49),to(#ffd252));

-webkit-gradient是background的一个属性值；

第一组参数type（类型）为 linear；

第二组参数是,x1 y1, x2 y2,当成颜色渐变体的两个点的坐标就是

from(开始颜色值),to(结束颜色值)是两个渐变颜色值；

四、携程移动端案例

案例: 携程网移动端首页

方案：采用flex布局

特点：很多盒子的高度固定，随着浏览器视口的缩小，高度保持不变。

常见flex布局思路:

案例总结心得

1.flex的嵌套使用

image-20200506185323033

image-20200505103256568

html结构

1
2
3
4
5
6
7
8
9
<ul class="sub-nav">
        <li>
            <a href="">
                <span class="sub-nav-icon-travel"></span>
                <span>景区</span>
            </a>
        </li>
        <li>2</li>
  </ul>

css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ul.sub-nav {
    display: flex;
    flex-wrap: wrap;
}

ul.sub-nav li {
    flex: 20%;
}

ul.sub-nav li a {
    display: flex;    
}

/*.sub-nav li a span {
    flex: 1;
}*/
小图标不需要在设置flex-grow。
2.二倍图处理：

  • 先打开图片，查看尺寸，确定图片尺寸和网页存放图片盒子的尺寸，确定是几倍图的关系。

  • 缩放图片的尺寸

  • 测量精灵图中所需图标的位移

  • background-size是缩放后的精灵图尺寸，y可直接设置为auto。

1
2
3
4
5
.nav-common a:nth-child(1) {
    flex: 0 1 31%;
    background: url(../images/grid-nav-items-hotel@v7.15.png) no-repeat bottom right;
    background-size: 73px auto;
}

背景图片的background-position除了位移还可以是方位词。

3 属性选择器巧用精灵图

利用属性选择器节省更多的代码。

image-20200506172226607 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.sub-nav li a span[class^=sub-nav-icon] {
    width: 28px;
    height: 28px;
    background: url(../images/un_ico_subnav2x@v7.152.png) no-repeat;
    background-size: 28px auto;
    margin: 10px 0 5px;
}

.sub-nav li:nth-child(2) a span {
    background-position: -0 -28px;
}

.sub-nav li:nth-child(3) a span {
    background-position: -0 -56px;
}

.sub-nav li:nth-child(4) a span {
    background-position: -0 -84px;
}
4.transform做到三角
image-20200506171641232 
1
2
3
4
5
6
7
8
9
10
.triangle {
    display: inline-block;
    border: 1px solid #666;
    border-width: 0 1px 1px 0;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    vertical-align: 2px;
}
5.border-radius做不规则提示框
image-20200506171823229 
1
2
3
4
5
6
7
8
9
10
11
.nav-item-jhj-tag {
    position: absolute;
    top: 9px;
    right: 65px;
    font-size: 10px;
    background-color: #f54c45;
    border-radius: 7px 7px 7px 0;
    padding: 0 3px;
    line-height: normal;
    color: #fff;
}
6. 图标和遮罩层用beafter伪元素
image-20200506172714184

添加搜索图标

1
2
3
4
5
6
7
8
9
10
.search::before {
    position: absolute;
    top: 5px;
    left: 5px;
    content: "";
    width: 15px;
    height: 15px;
    background: url(../images/home-common-sprite2x@v7.15.png) no-repeat -0px -0px;
    background-size: 21px auto;
}

遮罩层

1
2
3
4
5
6
7
8
9
.focus:before {
    content: "";
    position: absolute;
    z-index: 2; //避免遮罩层遮住其他
    height: 60px;
    display: block;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .4)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
}
7. 椭圆下边框
1
2
3
4
5
.focus {
    border-radius: 0 0 50% 50% / 0 0 45px 45px;
    background: #f2f2f2;
    overflow: hidden;//隐藏溢出部分
}
8. 浮动/绝对定位元素水平居中自适应

当元素浮动/绝对之后，就会脱离文档流。

1
2
3
4
5
6
7
position: absolute;
max-width: 540px;
min-width: 320px;
width: 100%;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
9. 伪元素 和 z-index无效的情况

img、input和其他的单标签是没有after和before伪元素的，因为单标签本身不能有子元素。

z-index无效的情况，一共有三种：

1、父标签 position属性为relative；

2、问题标签无position属性（不包括static）；

3、问题标签含有浮动(float)属性。

赏

谢谢你请我吃糖果

扫一扫，分享到微信

微信分享二维码