Flex伸缩布局，带你走进简洁的代码，一种新的体验

前言

简单来讲flex伸缩布局是咱们移动端布局比较经常使用的一种方式，移动端布局还有流式布局，less+rem+媒体查询布局这些都是单独制做移动端页面的一些布局方式。布局

这里主要介绍一下flex伸缩布局，由于它有不少优势，好比操做方便，布局很是简单，在移动端运用很普遍。

一、移动端基础

移动端浏览器我们主要对webkit内核进行兼容我们现在开发的移动端主要针对手机端开发
现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试

1、视口

视口( viewport )就是浏览器显示预面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口

1.1理想视口 ideal viewport

为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口， 对设备来讲,是最理想的视口尺对
需要手动添写meta视口标签通知浏览器操作

2、meta视口标签

2.1 meta视口标签

想要理想视口,我们需要给我们的移动端页面添加meta视口标签
<meta name="viewport" content= "width=device-width, user- scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-Scale= 1.0">

属性             解释说明
 
width     宽度设置的是viewport宽度，可以设置device-width特殊值

initial-scale  初始缩放比,大于0的数字
maximum-scale  最大缩放比，大于0的数字
minimum-scale  最小缩放比,大于0的数字
user-scalable  用户是否可以缩放，yes或no ( 1或0 )

meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度-致,简单理解就是设备有多宽,我
们布局的视口就多宽

2.2标准的viewport设置

视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0
 

3、二倍图

3.1物理像素&物理像素比

我们开发时候的1px不是一定等 于1个物理像素的心
PC端页面, 1个px等于1个物理像素的,但是移动端就不尽相同
一个px的能显示的物理像素点的个数,称为物理像素比或屏幕像素比

3.2多倍图

对于-张50px* 50px的图片,在手机Retina屏中打开,按照刚才的物理像素比会放大倍数,这样会造成图片模糊
在标准的viewport设置中 ,使用倍图来提高图片质量,解决在高清设备中的模糊问题
通常使用二倍图，因为iPhone 6\7\8的影响,但是现在还存在3倍图4倍图的情况,这个看实际开发公司需求
背景图片注意缩放问题

3.3背景缩放background-size

background-size属性规定背景图像的尺寸
background-size:背景图片宽度背景图片高度;
单位:
长度|百分比| cover Icontain; .
cover把背 景图像扩展至足够大,以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

 3.4  二倍精灵图做法

在firework里面把精灵图等比例缩放为原来的一半之后根据大小测量坐标
注意代码里面background-size也要写∶精灵图原来宽度的一半
 

4、移动端开发选择

4.1移动端主流方案

单独制作移动端页面（主流）

响应式页面兼容移动端

现在市场常见的移动端开发有单独制作移动端页面和响应式页面两种方案
现在市场主流的选择还是单独制作移动端页面

4.2 移动端技术解决方案

4.2.1 移动端浏览器

移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题。
我们可以放心使用H5标签和CSS3样式。
同时我们浏览器的私有前缀我们只需要考虑添加webkit即可

4.2.2 CSS初始化normalize.css
移动端CSS初始化推荐使用normalize.css/
●Normalize.css :保护了有价值的默认值
●Normalize.css :修复了浏览器的bug
●Normalize.css :是模块化的
●Normalize.css :拥有详细的文档

官网地址: http://necolas github.io/normalize.css/

4.2.3特殊样式
/*CSS3盒子模型*/
box- sizing: border -box;
-webkit -box-si zing: border -box;
/*点击高亮我们需要清除清除设 置为transparent完成透明*/
-webkit- tag-highlight- color: transpa rent;
/*在移动端浏览器默认的外观在ios.上加，上这个属性才能给按钮和输入框自定义样式*/
-webkit- appearance: none ;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit- touch-callout: none;I

4.3 移动端常见布局

移动端技术选型
移动端布局和以前我们学习的PC端有所区别:
1.单独制作移动端页面(主流)
流式布局 (百分比布局)

flex弹性布局(强烈推荐)
less + rem+媒体查询布局

混合布局

2.响应式页面兼容移动端(欺)
媒体查询
bootstarp

4.4 流式布局(百分比布局)

流式布局， 就是百分比布局,也称非固定像素布局。
通过盒子的宽度设置 成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。
流式布局方式是移动web开发使用的比较常 见的布局方式。
max-width最大宽度( max-height最大高度)
min-width
最小宽度
( min-height最小高度)

二、flex伸缩布局基础知识

1、什么是flex伸缩布局？

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

采用Flex布局的元素,称为Flex容器( flex container) , 简称"容器"。它的所有子元素自动成为容
器成员,称为Flex项目( flexitem) , 简称"项目"。

体验中div就是flex父容器。

用大白话来讲就是就是经过给父盒子添加flex属性，来控制子盒 子的位置和排列方式

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

体验中div就是flex父容器，体验中span就是子容器flex项目，子容器可以横向排列也可以纵向排列

注意点：当咱们为父盒子设为 flex 布局之后，子元素的 float、clear 和 vertical-align 属性将失效。

2. flex布局父项常见属性

 以下由6个属性是对父元素设置的
flex-direction :设置主轴的方向
justify-content :设置主轴上的子元素排列方式
flex-wrap :设置子元素是否换行
align-content :设置侧轴上的子元素的排列方式(多行文本)
align-items :设置侧轴上的子元素排列方式(单行文本)
flex-flow :复合属性，相当于同时设置了flex-direction 和flex-wrap

3.flex-direction设置主轴的方向

在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x 轴和y轴
默认主轴方向就是x轴方向,水平向右
默认侧轴方向就是y轴方向,水平向下
flex-direction属性决定主轴的方向(即项目的排列方向)
注意:主轴和侧轴是会变化的,就看flex- direction 设置谁为主轴,剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
属性值          说明
row          默认值从左到右
row-reverse    从右到左
column           从上到下
column-reverse    从下到上

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

justify-content属性定义了项目在主轴上的对齐方式
注意:使用这个属性之前一定要确定好主轴是哪个

属性值                    说明

flex-start默认值从头部开始如果主轴是x轴，则从左到右
flex-end    从尾部开始排列
center     在主轴居中对齐(如果主轴是x轴则水平居中
space- around   平分剩余空间
space-between  先两边贴边再平分剩余空间(重要)

5.flex-wrap设置子元素是否换行

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

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

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

该属性是控制子项在侧轴(默认是y轴)上的排列方式在子项为单项的时候使用
属性值         说明
flex-start    默认值从上到下
flex-end     从下到上
center      挤在一起居中(垂直居中)
stretch         拉伸

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

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

属性值                       说明
flex-start         默认值在侧轴的头部开始排列
flex-end          在侧轴的尾部开始排列
center            在侧轴中间显示

• space- around 子项在侧轴平分剩余空间
• space between 子项在侧轴先分布在两头,再平分剩余空间
• stretch  设置子项元素高度平分父元素高度

8.align-content 和align-items区别

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

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

9. flex布局子项常见属性：

• flex flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
• align-self  控制子项本身在侧轴上的排列方式
• order 属性定义项目的排列顺序 数值越小,排列越靠前,默认为0。这里和z-index不一样，z-index是调整重叠定位元素的堆叠顺序，堆罗汉的效果。只对相对定位，固定定位，绝对定位有效果，对标准流（静态定位），浮动都无次属性。

 

三、背景线性渐变

语法1 :
background: linear-gradient (起始方向，颜色1, 颜色2，....
background: -webkit-linear-gradient(left, red ，blue) ;
background: -webkit-1 inear-gradient(left top, red ，blue) ;
背景渐变必须添加浏览器私有前缀
起始方向可以是:方位名词或者度数, 如果省略默认就是top

总结

以上的主要就是关于流式布局和flex布局的相关知识内容，刚刚学习阶段，就想做的比较全一点，对自己也好掌握复习，希望对你们也会也帮助，无论是复习还是回顾，应该都有一定的作用。