移动端flex布局经验总结

flex布局（弹性布局）

2.布局原理

2.1 flex是flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

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

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

总结flex布局原理：

就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

3.flex布局父项常见属性

3.1常见父项属性

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

· flex-direction：设置主轴方向

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

· flex-wrap：设置子元素是否换行

· align-content：设置侧轴上的子元素的排列方式（多行）

· align-items：设置侧轴上的子元素排列方式（单行）垂直居中（主轴是x轴 ）

· flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

3.2· flex-direction：设置主轴方向

1.主轴与侧轴

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

· 默认主轴方向就是x轴方向，水平向右

· 默认侧轴方向就是y轴方向，水平向下

2.属性值

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

注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。 就是设x为主轴，y就是侧轴。设y为主轴，x就是侧轴

我们的子元素也是跟着主轴排列的

属性值 说明

row 默认从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上

3.3· justify-content：设置主轴上的子元素排列方式

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

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

属性值 说明

flex-start 默认值从头开始，如果主轴是x轴，则从左到右 ，主轴是y，从上到下*

flex-end 从尾部开始排列（顺序是不变的）设置元素居右排列

center 在主轴居中对齐（如果主轴是x轴则水平居中）

space-around 平分剩余空间

space-between 先两边贴边 在平分剩余空间（重要）

3.4· flex-wrap：设置子元素是否换行*

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

如果装不开，会缩小子元素的大小。

属性值 说明

wrap 换行

nowrap 不换行，默认

3.5· align-items：设置侧轴上的子元素排列方式（单行使用）

该属性是控制子轴在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

属性值 说明

flex-start 默认值，从上到小

flex-end 从下到上

center 垂直居中**

stretch 拉伸（拉伸子盒子不能给高度，会和父盒子高度一样高）

3.6· align-content：设置侧轴上的子元素的排列方式（多行使用，单行是没有效果的）

设置子项在侧轴上的排列方式 并且只能用于子项出现换行的情况（多行），在单行没有效果（单行align-items）

属性值 说明

flex-start 默认值从侧轴的头部开始排列*

flex-end 在侧轴的尾部开始排列

center 在侧轴中间显示**

space-around 子项在侧轴平分剩余空间**

space-between 子项在侧轴先两边贴边 在平分剩余空间（重要**）

stretch 设置子项元素高度平分父元素高度（拉伸子盒子不能给高度，会和父盒子高度一样高）

align-content 和 align-items 区别

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

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

· 一句话就是单行用align-items 多行用align-content

3.7flex-flow

flex-flow 是flex-direction 和 flex-wrap的复合属性写法

flex-flow：row wrap；（设置主轴为x轴、换行）

4.flex布局子项常见属性（添加在子元素身上的属性）

·flex子项目占的份数

·align-self控制子项自己在侧轴的排列方式

·order属性定义子项的排列顺序（前后顺序）

4.1 flex属性

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

flex：1/2/3 （平均分配为：1份/2份/3份）

4.2align-self 控制子项自己在侧轴上的排列方式

algn-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示集成父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self：flex-end；

4…3 order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0，可以为负数（注意：和z-index不一样）

order：-1； -1就在0的前面

案例制作

技术选型：flex为主

项目模式创建单独的文件夹：

css js img html

引入公共css、再引入自己的css

引入常用初始化样式body

盒子高度是固定死不变的，宽度是自适应。

1.搜索模块 search

固定定位，固定的盒子要设置宽度，固定的盒子宽度是以屏幕为准，所以要给他设置最大最小宽度。

固定盒子居中，margin： 0 auto；因为定位无效，只能修改left：50%值，和用transform：translateX（-50%）来修改。

解决css3 兼容问题 ，-webkit-transform： translateX（-50%）；要写在上面

左边框是自适应的，右边登录盒子给固定的大小，左边不给宽度自适应flex：1；（不要忘给父盒子添加display：flex属性）

右边的登录盒子图片用伪元素设置，::before；（是行内元素）

精灵图问题：

打开精灵图，把精灵图缩放为一半的大小（图片引入时候一样是要进行缩放的大小），（因为是2倍图所以缩放），然后测量大小

左边搜索盒子

css3 盒子模型 box-sizing：border-box；（边框算到宽高里面），文字设置行高等于高的话文字就会偏下，需要减去边框的像素

给伪元素绝对定位，用来替换block，这样文字可以和他一行显示

盒子阴影 box-shadow：0 0 0 rgba（0,0,0，.5） 第一个是水平，第二个是垂直，第三个是模糊，颜色0-1取值

2.焦点图 focus

3.局部导航栏 local-nav

给父级添加flex，子元素设置为5份。flex：1；

上下结构，将主轴设置为y轴flex-direction：column，就可以上下显示，居中对齐，是设置侧轴x居中（单行）align-items：center；

a标签的title属性可以设置鼠标移入显示的文本

快速更换背景图片：

利用属性选择器更改 ，整体声明，在一个一个更换图片

4.主导航栏 nav

三行需要给他主轴设置为y，然后分等份，三列再将主轴设置为x，分等份

小竖线用白边框，不然后会有背景色

已经设置flex：1；的可以设置flex属性

文字阴影 text-shadow：1 1 rgba（0,0,0，.5） 第一个是水平，第二个是垂直

渐变背景色 （必须添加浏览器前缀）

• background：linear-gradient（起始方向，颜色1，颜色2，…）；
• background：-webkit-linear-gradient（起始方向，颜色1，颜色2，…）；
• 默认起始方向是top，起始方向可以是 left top 这样 左上到右下

5.侧导航栏 subnav-entry

flex-warp：warp； 这里li的盒子 设置为flex：1是没有效果的，此时li的宽的就需要用百分比了，设置为父亲的25%

6.销售区域sales-box 分上sales-hd 下sales-bd两块

sales-hd 头部

左右两块定位

左边热门活动结构优化，要将字给隐藏，图片使用伪元素添加，伪元素必须有 content：‘’ 属性

右边 更多福利

不需要设置大小 用内容撑开；

小三角用伪元素写：三角做法，给一个上边框 一个右边框 将角度转变 transform：rotate（单位deg）