flex布局和响应式布局

flex伸缩布局

一、是什么

Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局，采用Flex布局的元素，称为flex容器container。它的所有子元素自动成为容器成员，称为flex项目item。

容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列，通过flex-direction来决定主轴的方向，每根轴都有起点和终点，这对于元素的对齐非常重要。

二、属性

关于flex常用的属性，我们可以划分为容器属性和容器成员属性。

容器属性有：

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

flex-wrap 决定容器内项目是否可换行

flex-flow 是flex-direction属性和flex-wrap属性的简写形式

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

align-items 定义项目在交叉轴上如何对齐

align-content 定义了多根轴线的对齐方式

flex-direction

决定主轴的方向(即项目的排列方向)

.container {   flex-direction: row | row-reverse | column | column-reverse;
}

属性对应如下：

row（默认值）：主轴为水平方向，起点在左端

row-reverse：主轴为水平方向，起点在右端

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿

如下图所示：

flex-wrap

弹性元素永远沿主轴排列，那么如果主轴排不下，通过flex-wrap决定容器内项目是否可换行

.container {  flex-wrap: nowrap | wrap | wrap-reverse;
}

属性对应如下：

nowrap（默认值）：不换行

wrap：换行，第一行在下方

wrap-reverse：换行，第一行在上方

默认情况是不换行，但这里也不会任由元素直接溢出容器，会涉及到元素的弹性伸缩

flex-flow

是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

定义了项目在主轴上的对齐方式

.box {justify-content: flex-start | flex-end | center | space-between | space-around;
}

属性对应如下：

flex-start（默认值）：左对齐

flex-end：右对齐

center：居中

space-between：两端对齐，项目之间的间隔都相等

space-around：两个项目两侧间隔相等

效果图如下：

align-items

定义项目在交叉轴上如何对齐，项目只有一根轴线时设置对齐。

.box {align-items: flex-start | flex-end | center | baseline | stretch;
}

属性对应如下：

flex-start：交叉轴的起点对齐

flex-end：交叉轴的终点对齐

center：交叉轴的中点对齐

baseline: 项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

align-content

定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

属性对应如吓：

flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

center：与交叉轴的中点对齐

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

stretch（默认值）：轴线占满整个交叉轴

效果图如下：

容器成员属性如下：

order 定义项目的排列顺序。

flex-grow 定义项目的放大比例

flex-shrink 定义了项目的缩小比例

flex-basis 设置的是元素在主轴上的初始尺寸

flex 是flex-grow, flex-shrink 和 flex-basis的简写

align-self 允许单个项目有与其他项目不一样的对齐方式

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {order: <integer>;
}

flex-grow

上面讲到当容器设为flex-wrap: nowrap;不换行的时候，容器宽度有不够分的情况，弹性元素会根据flex-grow来决定，定义项目的放大比例（容器宽度>元素总宽度时如何伸展），默认为0，即如果存在剩余空间，也不放大。

.item {flex-grow: <number>;
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

如果一个项目的·flex-grow·属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍

弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效

flex-shrink

定义了项目的缩小比例（容器宽度<元素总宽度时如何收缩），默认为1，即如果空间不足，该项目将缩小

.item {flex-shrink: <number>; /* default 1 */
}

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

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

在容器宽度有剩余时，flex-shrink也是不会生效的

flex-basis

设置的是元素在主轴上的初始尺寸，所谓的初始尺寸就是元素在flex-grow和flex-shrink生效前的尺寸，浏览器根据这个属性，计算主轴是否有多余空间，默认值为auto，即项目的本来大小，如设置了width则元素尺寸由width/height决定（主轴方向），没有设置则由内容决定。

.item {flex-basis: <length> | auto; /* default auto */
}

当设置为0的是，会根据内容撑开，它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，也是比较难懂的一个复合属性

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

一些属性有：

flex: 1 = flex: 1 1 0%

flex: 2 = flex: 2 1 0%

flex: auto = flex: 1 1 auto

flex: none = flex: 0 0 auto，常用于固定尺寸不伸缩

flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别

当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸

当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑

注意：建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值

align-self

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

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

效果图如下：

三、应用场景

在以前的文章中，我们能够通过flex简单粗暴的实现元素水平垂直方向的居中，以及在两栏三栏自适应布局中通过flex完成，这里就不再展开代码的演示

包括现在在移动端、小程序这边的开发，都建议使用flex进行布局

页面响应式布局设计

一、是什么

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整，描述响应式界面最著名的一句话就是“Content is like water”，大白话便是“如果将屏幕看作容器，那么内容就像水一样”

响应式网站常见特点：

同时适配PC + 平板 + 手机等
标签导航在接近手持终端设备时改变为经典的抽屉式导航
网站的布局会根据视口来调整模块的大小和位置

二、实现方式

响应式设计的基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理，为了处理移动端，页面头部必须有meta声明viewport。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

属性对应如下：

width=device-width: 是自适应手机屏幕的尺寸宽度

maximum-scale:是缩放比例的最大值

inital-scale:是缩放的初始化

user-scalable:是用户的可以缩放的操作

实现响应式布局的方式有如下：

媒体查询

百分比

vw/vh

rem

媒体查询

CSS3中的增加了更多的媒体查询，就像if条件表达式一样，我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表。

使用@Media查询，可以针对不同的媒体类型定义不同的样式，如：

@media screen and (max-width: 1920px) { ... }

当视口在375px - 600px之间，设置特定字体大小18px。

@media screen (min-width: 375px) and (max-width: 600px) {body {font-size: 18px;}
}

通过媒体查询，可以通过给不同分辨率的设备编写不同的样式来实现响应式的布局，比如我们为不同分辨率的屏幕，设置不同的背景图片，比如给小屏幕手机设置@2x图，为大屏幕手机设置@3x图，通过媒体查询就能很方便的实现

百分比

通过百分比单位 " % " 来实现响应式的效果，比如当浏览器的宽度或者高度发生变化时，通过百分比单位，可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果

height、width属性的百分比依托于父标签的宽高，但是其他盒子属性则不完全依赖父元素：

子元素的top/left和bottom/right如果设置百分比，则相对于直接非static定位(默认定位)的父元素的高度/宽度
子元素的padding如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的width，而与父元素的height无关。
子元素的margin如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的width
border-radius不一样，如果设置border-radius为百分比，则是相对于自身的宽度

可以看到每个属性都使用百分比，会照成布局的复杂度，所以不建议使用百分比来实现响应式

vw/vh

vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度。任意层级元素，在使用vw单位的情况下，1vw都等于视图宽度的百分之一，与百分比布局很相似，在以前文章提过与%的区别，这里就不再展开述说

rem

rem是相对于根元素html的font-size属性，默认情况下浏览器字体大小为16px，此时1rem = 16px，可以利用前面提到的媒体查询，针对不同设备分辨率改变font-size的值，如下：

@media screen and (max-width: 414px) {html {font-size: 18px}
}
@media screen and (max-width: 375px) {html {font-size: 16px}
}
@media screen and (max-width: 320px) {html {font-size: 12px}
}

为了更准确监听设备可视窗口变化，我们可以在css之前插入script标签，内容如下：

//动态为根元素设置字体大小
function init () {// 获取屏幕宽度var width = document.documentElement.clientWidth// 设置根元素字体大小。此时为宽的10等分document.documentElement.style.fontSize = width / 10 + 'px'
}//首次加载应用，设置一次
init()
// 监听手机旋转的事件的时机，重新设置
window.addEventListener('orientationchange', init)
// 监听手机窗口变化，重新设置
window.addEventListener('resize', init)

无论设备可视窗口如何变化，始终设置rem为width的1/10，实现了百分比布局，除此之外，我们还可以利用主流UI框架，如：element ui、antd提供的栅格布局实现响应式。

小结

响应式设计实现通常会从以下几方面思考：

弹性盒子（包括图片、表格、视频）和媒体查询等技术

使用百分比布局创建流式布局的弹性UI，同时使用媒体查询限制元素的尺寸和内容变更范围

使用相对单位使得内容自适应调节

选择断点，针对不同断点实现不同布局和内容展示

三、总结

响应式布局优点可以看到：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：

仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

dome

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>携程出行</title><link rel="stylesheet" href="./css/normalize.css"/><link rel="stylesheet" href="./css/index.css"/>
</head>
<body><!-- 顶部搜索 --><div class="search-index"><div class="search">搜索:目的地/酒店/景点/航班号</div><a href="#" class="user">我 的</a></div><!-- 焦点图模块 --><div class="focus"><img src="upload/focus.jpg" alt=""></div><!-- 局部导航栏 --><ul class="local-nav"><li><a href="#" title="景点·玩乐"><span class="local-nav-icon-icon1"></span><span>景点·玩乐</span></a></li><li><a href="#" title="景点·玩乐"><span class="local-nav-icon-icon2"></span><span>景点·玩乐</span></a></li><li><a href="#" title="景点·玩乐"><span class="local-nav-icon-icon3"></span><span>景点·玩乐</span></a></li><li><a href="#" title="景点·玩乐"><span class="local-nav-icon-icon4"></span><span>景点·玩乐</span></a></li><li><a href="#" title="景点·玩乐"><span class="local-nav-icon-icon5"></span><span>景点·玩乐</span></a></li></ul><!-- 主导航栏 --><nav><div class="nav-common"><div class="nav-items"><a href="#">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div></div><div class="nav-common"><div class="nav-items"><a href="#">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div></div><div class="nav-common"><div class="nav-items"><a href="#">海外酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div><div class="nav-items"><a href="#">海外酒店</a><a href="#">特价酒店</a></div></div></nav><!-- 侧导航栏 --><ul class="subnav-entry"><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li><li><a href="#"><span class="subnav-entry-icon"></span><span>电话费</span></a></li></ul><!-- 销售模块 --><div class="sales-box"><div class="sales-hd"><h2>热门活动</h2><a href="#" class="more">获取更多福利</a></div><div class="selas-bd"><div class="row"><a href="#"><img src="./upload/pic1.jpg" alt=""></a><a href="#"><img src="./upload/pic2.jpg" alt=""></a></div><div class="row"><a href="#"><img src="./upload/pic3.jpg" alt=""></a><a href="#"><img src="./upload/pic4.jpg" alt=""></a></div><div class="row"><a href="#"><img src="./upload/pic5.jpg" alt=""></a><a href="#"><img src="./upload/pic6.jpg" alt=""></a></div></div></div><footer><div class="footer"><a href="#"><span class="footer-icon"></span><span>电话预定</span></a></div><div class="footer"><a href="#"><span class="footer-icon"></span><span>电话预定</span></a></div><div class="footer"><a href="#"><span class="footer-icon"></span><span>电话预定</span></a></div></footer>
</body>
</html>

css

body{max-width: 540px;min-width: 320px;margin: 0 auto;font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;color: #000;background: #f2f2f2;overflow-x: hidden;-webkit-tap-highlight-color: transparent;
}
div{box-sizing: border-box;
}
a{text-decoration: none;color: #222;
}
ul{margin: 0;padding: 0;list-style: none;
}
.search-index{display: flex;position: fixed;top: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 44px;min-width: 320px;max-width: 540px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #f6f6f6; }
.search{position: relative;margin: 7px 10px;padding-left: 25px;height: 26px;border: 1px solid #ccc;border-radius: 5px;font-size: 12px;color: #666;line-height: 24px;box-shadow: 0 2px 4px rgba(0,0,0,.2);flex: 1;
}
.search::before{content: "";position: absolute;top: 5px;left: 5px;width: 15px;height: 15px;background: url(../img/sprite.png) no-repeat -59px -279px;background-size: 104px auto;
}
.user{width: 44px;height: 44px;/* background-color: aqua; */font-size: 12px;text-align: center;color: #2eaae0;
}
.user::before{content: "";display: block;width: 23px;height: 23px;background: url(../img/sprite.png) no-repeat -59px -194px;background-size: 104px auto; margin: 4px auto -2px;
}
.focus img{margin-top: 44px;width: 100%;
}
.local-nav{display: flex;margin: 3px 4px;height: 64px;border-radius: 8px;background-color: #fff;
}
.local-nav li{flex: 1;
}
.local-nav a{display: flex;flex-direction: column;align-items: center;font-size: 12px;
}
.local-nav li [class^="local-nav-icon"]{margin-top: 8px;width: 32px;height: 32px;background: url(../img/localnav_bg.png) no-repeat 0 0;background-size: 32px auto;
}
.local-nav li .local-nav-icon-icon2{background-position:  0 -32px;
}
.local-nav li .local-nav-icon-icon3{background-position:  0 -64px;
}
.local-nav li .local-nav-icon-icon4{background-position:  0 -96px;
}
.local-nav li .local-nav-icon-icon5{background-position:  0 -128px;
}
/* nav */
nav{overflow: hidden;margin: 3px 4px;border-radius: 8px;
}
.nav-common{display: flex;height: 88px;background-color: pink;
}
.nav-common:nth-child(2){margin: 3px 0;
}
.nav-items{display: flex;flex-direction: column;flex: 1;
}
.nav-items a{flex: 1;text-align: center;line-height: 44px;font-size: 14px;color: #fff;text-shadow: 1px 1px 1px rgba(0,0,0,.2);
}
/* -n+2就是选择前面两个元素 */
.nav-items:nth-child(-n+2){border-right: 1px solid #fff;
}
.nav-items a:first-child{border-bottom: 1px solid #fff;
}
.nav-items:nth-child(1) a{border: 0;background: url(../img/hotel.png) no-repeat bottom center;background-size: 121px auto;
}
.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 */
.subnav-entry{display: flex;margin: 0 4px;border-radius: 8px;background-color: #fff;flex-wrap: wrap;padding: 5px 0;
}
.subnav-entry li{/* 里面的子盒子可以写 % 相对于父级来说的 */flex: 20%;
}
.subnav-entry a{display: flex;flex-direction: column;align-items: center;
}
.subnav-entry-icon{width: 28px;height: 28px;background-color: pink;margin-top: 4px;background: url(../img/subnav-bg.png) no-repeat;background-size: 28px auto;
}
/* sales-box */
.sales-box{margin: 4px;border-top: 1px solid #bbb;background-color: #fff;
}
.sales-hd{position: relative;height: 44px;border-bottom: 1px solid #ccc;
}
.sales-hd h2{position: relative;text-indent: -999px;overflow: hidden;
}
.sales-hd h2::after{   content: "";position: absolute;top: 5px;left: 8px;width: 79px;height: 15px;background: url(../img/hot.png) no-repeat 0 -20px;background-size: 79px auto;
}
.more{position: absolute;top: 0px;right: 5px;padding: 3px 20px 3px 10px;background: -webkit-linear-gradient(left,#FF506C, #FF6BC6);border-radius: 15px;color: #fff;
}
.more::after{content: "";position: absolute;top: 9px;right: 9px;width: 7px;height: 7px;border-top: 2px solid #fff;border-right: 2px solid #fff;transform: rotate(45deg);
}
.row{display: flex;
}
.row a{flex: 1;border-bottom: 1px solid #eee;
}
.row a img{width: 100%;
}
.row a:first-child{border-right: 1px solid #eee;
}
footer{display: flex;position: fixed;bottom: 0px;width: 100%;height: 40px;min-width: 320px;max-width: 540px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #f6f6f6;
}
.footer{flex: 1;
}
.footer a{display: flex;flex-direction: column;align-items: center;font-size: 12px;
}
.footer-icon{margin-top: 4px;width: 18px;height: 18px;background-color: pink;
}

效果图