响应式布局（媒体查询）
什么是媒体查询
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
为什么响应式设计需要，媒体查询
如果没有CSS3的媒体查询模块，就不能针对设备特性（如视口宽度）设置特定的CSS样式；
如何在CSS文件中引入媒体查询
媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会覆盖前面的样式
怎样使用media(媒体查询)
先需要在html文档中添加以下代码，用来兼容移动设备的显示效果
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
width=device-width:宽度等于当前设备的宽度;
initial-scale=1：初始的缩放比例(默认为1);
maximum-scale=1：允许用户缩放到得最大比例(默认为1)
user-scalable=no：用户不能手动缩放;
什么叫做响应式
通俗的说就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局的优势
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。
响应式核心技术－媒体查询
通过不同的媒介类型和条件定义样式表规则。媒介查询让CSS可以更精确作用于不同的媒介类型和同一媒介的不同条件。媒介查询的大部分媒介特性都接受min和max用于表达”大于或等于”和”小于或等于”
媒体查询写法
@media screen and (max-width: 960px){
body{background:#000;}
}
意思是：当页面小于960px的时候执行它下面的CSS
//and一定要加空格
@media screen and (min-width:960px) and (max-width:1200px){
body{background:yellow;}
}
意思是当页面宽度大于960px小于1200px的时候执行下面的CSS。
@media screen and (max-device-width:960px)
body{background:red;}
}
设备屏幕的输出宽度Device Width
对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。
<link rel="stylesheet" media="screen and (max-device-width:480px)" href="style.css" />
常用的响应式布局断点
很多时候，在响应式设计中，你经常看到的断点值是：320px、480px、768px和1024px等。
320px是iPhone设备的竖屏尺寸，480是iPhone设备横向屏幕尺寸，768px是iPad竖向屏幕尺寸
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
这段代码的几个参数解释：
name="viewport"//窗口设定
width = device-width：宽度等于当前设备的宽度
initial-scale：初始的缩放比例（默认设置为1.0）
minimum-scale：允许缩放的最小比例 （默认设置为1.0）
maximum-scale：允许缩放的最大比例 （默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
Meta标签定义
移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，
在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，
但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，
也可能比浏览器的可视区域要小。
(1)使用 viewport meta 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
(2)隐藏苹果浏览器的工具栏和菜单栏。 全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
(3)设置Web App的状态栏（屏幕顶部栏）的样式
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
代码展示
@media screen and (max-width:720px) and (min-width:320px){
body{
background-color:red;
}
}
@media screen and (max-width:320px){
body{
background-color:blue;
}
}
该段媒体查询的意思是：
当设备屏幕宽度在320px——720px之间时，媒体查询中body的背景色（background-color:red;）会重叠之前的body背景色，
当设备屏幕宽度在320px及以下时，媒体查询中body的body背景色（background-color:blue;）会重叠之前的body背景色；
Responsive Web Design 响应式设计
将已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，命名为响应式网页设计。
是一种针对任意设备对网页内容进行“完美”布局的一种显示机制。
简言之，是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优势
多终端视觉和操作体验非常风格统一
兼容当前及未来新设备
响应式web设计中的大部分技术可以用在WebApp开发中
节约了开发成本，维护成本也降低很多
不足
兼容性：低版本浏览器兼容性有问题
移动带宽流量：相比较手机定制网站，流量稍大，
但比较加载一个完整pc端网站显然是小得多
代码累赘，会出现隐藏无用的元素，加载时间加长
兼容各种设备工作量大
适用什么？
对于重内容的网站，例如形象展示，则比较适合使用响应式web设计
不适用什么？
对于重功能的网站，如电子商务类，则更推荐使用独立移动网站
@media 媒体查询 (media query)
@media 媒体查询 (media query)
基本语法
外联CSS语法
<link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />
<link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />
<link rel=“stylesheet” href=“medium.css” media=“screen and
(max-width:1024px) and (min-width:320px)" />
多列布局（columns）
通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
多列属性：
column-count
column-gap
column-rule
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本不支持多列属性
1.columns
columns 是一个复合属性，包含 column-width 和 column-count 这两种简写。意 为同时设置分列列数和分列宽度。
//分成四列，每列宽度自适应
columns: auto 4;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多列布局</title>
<style>
.newspaper
{width:200px;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
-moz-column-rule:4px outset #f00; /* Firefox */
-webkit-column-rule:4px outset #f00; /* Safari and Chrome */
column-rule:4px outset #f00;
}
</style>
</head>
<body>
<div class="newspaper">文本在备注中文本在备注中文本在备注中文本在备注中文本在备注中文本在备注中</div>
</body>
</html>
创建多列
column-count: 数字
属性规定元素应该被分隔的列数
规定列之间的间隔
column-gap:数值
属性规定列之间的间隔
列规则
column-rule:
属性设置列之间的宽度、样式和颜色规则
duolie.html
2.column-width
column-width 属性，用于设置每列的宽度。
//设置列宽
column-width: 200px;
这里设置了 200px，有点最小宽度的意思。当浏览器缩放到小于 200 大小时，将变成 1 列显示。而如果是 auto，则一直保持四列。
3.column-count
column-count
column-count 属性，用于设置多少列。
//设置列数
column-count: 4;
4.column-gap
column-gap
column-gap 属性，用于设置列间距
//设置列间距
-moz-column-gap: 100px;
5.column-rule
column-rule 属性，设置每列
中间的分割线
//设置列边线
column-rule: 2px dashed gray;
弹性布局（display：Flex）
弹性盒流向(设置在父元素上)
flex-direction：
row：横向从左到右排列（左对齐），默认的排列方式。默认的设置
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
flex-direction.html
知识点1.Flex布局基本概念
Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
display: flex;
display: inline-flex;
display: -webkit-flex; /* Safari，Chrome */
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。
采用Flex布局的元素，称为
Flex容器（flex container），简
称”容器”。它的所有子元素自动
成为容器成员，称为Flex项目
（flex item），简称”项目”。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
Flex布局的好处
Flexbox通常能让我们更好的操作他的子元素布局，例如：
如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
可以快速让他们布局在一列； 可以方便让他们对齐容器的左、右、中间等； 无需修改结构就可以改变他们的显示顺序； 如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。
display:flex就是弹性布局的启动钥匙
知识点2.Flex容器属性
第1项.flex-direction
指定伸缩容器主轴的伸缩流方向
这是用来创建方轴，从而定义
Flex项目在Flex容器中放置的方向。Flexbox是一种单方向的布局概念。认为Flex项目主要排列方式要么是水平排列，要么是垂直列排列。
flex-direction: row | row-reverse | column | column-reverse;
row(默认值):如果书写方式是ltr，那么Flex项目从左向右排列；如果书写方式是rtl，那么Flex项目从右向左排列 row-reverse:如果书写方式是ltr，那么Flex项目从右向左排列；如果书写方式是rtl，那么Flex项目从左向右排列 column:和row类似，只不过方向是从上到下排列 column-reverse:和row-reverse类似，只不过方向是从下向上排列
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex-direction 弹性盒子流向</title>
<style>
.box{
display:-webkit-flex;/*对于css2.0的属性，写上css3.0的值，要想浏览器兼容的话，在其属性值的上面加上-webkit-*/
display:flex;/*为什么上面有了还写，是因为这一条可以适合所有的能够识别的浏览器*/
margin:0;padding:10px;list-style:none;background:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box{
-webkit-flex-direction:row;
flex-direction:row;/*按照行的形式排版*/
}
#box2{
-webkit-flex-direction:row-reverse;
flex-direction:row-reverse;
}
#box3{
height:500px;
-webkit-flex-direction:column;
flex-direction:column;
}
#box4{
height:500px;
-webkit-flex-direction:column-reverse;
flex-direction:column-reverse;
}
</style>
</head>
<body>
<h2>flex-direction:row</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:row-reverse</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-direction:column-reverse</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
第2项.flex-wrap
指定伸缩项目是否沿着侧轴排列
默认情况之下，Flex项目都尽可能在一行显示。你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。方向在这也扮演了一个重要角度，决定新的一行堆放方向。
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap(默认值):单行显示，如果书写方式是ltr，Flex项目从左向右排列，反之rtl，从右向左排列 wrap:多行显示，如果书写方式是ltr，Flex项目从左向右排列，反之rtl，从右向左排列 wrap-reverse:多行显示，如果书写方式是ltr，Flex项目从右向左排列，反之rtl，从左向右排列
伸缩换行 (适用于父类容器上)对于flex的自动默认不换行的；
flex-wrap:
nowrap：当子元素溢出父容器时不换行。
wrap：当子元素溢出父容器时自动换行。
wrap-reverse：反转 wrap 排列。
flex-wrap.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex-wrap 弹性盒子-伸缩是否换行</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:220px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box2{
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
}
#box3{
-webkit-flex-wrap:wrap-reverse;
flex-wrap:wrap-reverse;
}
</style>
</head>
<body>
<h2>flex-wrap:nowrap</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>flex-wrap:wrap-reverse</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
第3项.flex-flow
适用于flex容器元素
这是flex-direction和flex-wrap两个属性的缩写。两个属性决定了伸缩容器的主轴与侧轴。默认值是row nowrap（中间用空格隔开）。
伸缩流方向与换行(适用于父类容器上)
flex-flow: flex-direction属性值 flex-wrap属性值
将2个属性结合一起使用
主轴横向对齐
第4项.justify-content
主轴上对齐伸缩项目
用于在主轴上对齐伸缩项目。这一行为会在所有可伸缩长度
及所有自动边距均被解释后进行。当一行上的所有伸缩项目
都不能伸缩或可伸缩但是已经达到其最大长度时，这一属性
才会对多余的空间进行分配。当项目溢出某一行时，这一属性也会在项目的对齐上施加一些控制。
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start(默认值):伸缩项目向一行的起始位置靠齐。该行的第一个伸缩项目在主轴起点边的外边距与该行在主轴起点的边对齐，同时所有后续的伸缩项目与其前一个项目对齐。
flex-end:伸缩项目向一行的结束位置靠齐。该行的最后一个伸缩项目在主轴终点边的外边距与该行在主轴终点的边对齐，同时所有前面的伸缩项目与其后一个项目对齐。
center:伸缩项目向一行的中间位置靠齐。该行的伸缩项目将相互对齐并在行中居中对齐，同时第一个项目与该行在主轴起点的边的距离等同与最后一个项目与该行在主轴终点的边的距离（如果剩余空间是负数，则保持两端溢出的长度相等）。 space-between:伸缩项目会平均地分布在行里。如果剩余空间是负数，或该行只有一个伸缩项目，则此值等效于flex-start。在其它情况下，第一个项目在主轴起点边的外边距会与该行在主轴起点的边对齐，同时最后一个项目在主轴终点边的外边距与该行在主轴终点的边对齐，而剩下的伸缩项目在确保两两之间的空白空间相等下平均分布。 space-around:伸缩项目会平均地分布在行里，两端保留一半的空间。如果剩余空间是负数，或该行只有一个伸缩项目，则该值等效于center。在其它情况下，伸缩项目在确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半下平均分布。
主轴横向对齐 (设置在父类容器上)
justify-content:
flex-start： 起始对齐
flex-end： 结束对齐
center： 居中对齐
space-between: 分开对齐
space-around: 分开左右边距对齐
justify-content.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>justify-content 弹性盒子-横向对齐方式</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:400px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background:#eee;}
.box li{margin:5px;width:50px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-justify-content:flex-start;
justify-content:flex-start;
}
#box2{
-webkit-justify-content:flex-end;
justify-content:flex-end;
}
#box3{
-webkit-justify-content:center;
justify-content:center;
}
#box4{
-webkit-justify-content:space-between;
justify-content:space-between;
}
#box5{
-webkit-justify-content:space-around;
justify-content:space-around;
}
</style>
</head>
<body>
<h2>justify-content:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<h2>justify-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
第5项.align-items
指定伸缩项目沿着侧轴对齐方式
伸缩项目可以在伸缩容器的当前行的侧轴上进行对
齐，这类似于justify-content属性，但是是另一个
方向。align-items可以用来设置伸缩容器中包括匿名伸缩项目的所有项目的对齐方式。
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
center:伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。
baseline:如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。 stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。
侧轴对齐（这个一般常用）
align-items (设置在父) 、align-self (设置在子)
flex-start： 起始对齐
flex-end： 结束对齐
center： 居中对齐，用得多
baseline： 基线对齐
stretch： 上下拉升对齐
注:align-items基本与align-content差不多 就2个参数没有
align-self.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>align-self 弹性盒子-侧轴对齐</title>
<style>
.box{
display:-webkit-flex;
display:flex;
height:100px;margin:0;padding:10px;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
.box li:nth-child(1){
-webkit-align-self: flex-end;
align-self: flex-end;
}
.box li:nth-child(2){
-webkit-align-self: center;
align-self: center;
}
.box li:nth-child(3){
-webkit-align-self: flex-start;
align-self: flex-start;
}
.box li:nth-child(4){
-webkit-align-self: baseline;
align-self: baseline;
padding:20px 10px;
}
.box li:nth-child(5){
-webkit-align-self: baseline;
align-self: baseline;
}
.box li:nth-child(6){
-webkit-align-self: stretch;
align-self: stretch;
}
.box li:nth-child(7){
-webkit-align-self: auto;
align-self: auto;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
</ul>
</body>
</html>
第6项.align-content
多根轴线的对齐方式
当伸缩容器的侧轴还有多余空间时，
align-content属性可以用来调准伸缩行在伸缩容
器里的对齐方式，这与调准伸缩项目在主轴上对齐
方式的justify-content属性类似。
请注意本属性在只有一行的伸缩容器上没有效果。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start:各行向伸缩容器的起点位置堆叠。伸缩容器中第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点的边，之后的每一行都紧靠住前面一行。
flex-end:各行向伸缩容器的结束位置堆叠。伸缩容器中最后一行在侧轴终点的边会紧靠住该伸缩容器在侧轴终点的边，之前的每一行都紧靠住后面一行。
center:各行向伸缩容器的中间位置堆叠。各行两两紧靠住同时在伸缩容器中居中对齐，保持伸缩容器在侧轴起点边的内容边和第一行之间的距离与该容器在侧轴终点边的内容边与第最后一行之间的距离相等。（如果剩下的空间是负数，则行的堆叠会向两个方向溢出的相等距离。）
space-between:各行在伸缩容器中平均分布。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于flex-start。在其它情况下，第一行在侧轴起点的边会紧靠住伸缩容器在侧轴起点边的内容边，最后一行在侧轴终点的边会紧靠住伸缩容器在侧轴终点的内容边，剩余的行在保持两两之间的空间相等的状况下排列。
space-around:各行在伸缩容器中平均分布，在两边各有一半的空间。如果剩余的空间是负数或伸缩容器中只有一行，该值等效于center。在其它情况下，各行会在保持两两之间的空间相等，同时第一行前面及最后一行后面的空间是其他空间的一半的状况下排列。
stretch:各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于flex-start。在其它情况下，剩余空间被所有行平分，扩大各行的侧轴尺寸。
注意：只有多行的伸缩容器才会在侧轴上有多余的空间以供对齐，因为仅包含一行的伸缩容器中，唯一的一行会自动伸展填充全部的空间。
主轴纵向对齐 (设置在父类容器上)有小坑不常用
align-content:
flex-start： 起始对齐
flex-end： 结束对齐
center： 居中对齐
space-between: 分开对齐
space-around: 分开左右边距对齐
strecth 上下拉升对齐
align-content.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>align-content 弹性盒子-纵向对齐方式</title>
<style>
.box{
display:-webkit-flex;
display:flex;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
width:200px;height:200px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;}
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;}
#box{
-webkit-align-content:flex-start;
align-content:flex-start;
}
#box2{
-webkit-align-content:flex-end;
align-content:flex-end;
}
#box3{
-webkit-align-content:center;
align-content:center;
}
#box4{
-webkit-align-content:space-between;
align-content:space-between;
}
#box5{
-webkit-align-content:space-around;
align-content:space-around;
}
#box6{
-webkit-align-content:strecth;
align-content:strecth;
}
</style>
</head>
<body>
<h2>align-content:flex-start</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:flex-end</h2>
<ul id="box2" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:center</h2>
<ul id="box3" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-between</h2>
<ul id="box4" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:space-around</h2>
<ul id="box5" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
<h2>align-content:strecth</h2>
<ul id="box6" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</body>
</html>
知识点3.Flex项目属性(设置在子元素上的)
第1项.order
项目流排列顺序
默认情况，Flex项目是按文档源的流顺序排列。然而，在Flex容器中可以通过order属性来控制Flex项目的顺序源。
根据order重新排序伸缩项目。有最小（负值最大）order的伸缩项目排在第一个。若有多个项
目有相同的order值，这些项目照文件顺序排。这个步骤影响了.伸缩项目生盒树成的盒子的顺序
，也影响了后面的演算法如何处理各项目。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>order 弹性盒子-子元素顺序</title>
<style>
.box{
display:-webkit-flex;
display:flex;/*和上面同样的道理，想使用弹性盒子父类需要设置*/
margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(1){
-webkit-order:1;
order:1;/*兼容与通用，如果数字一样就按照元素的先后来算的*/
}
#box li:nth-child(2){
-webkit-order:9;
order:9;
}
#box li:nth-child(3){
-webkit-order:-1;
order:-1;
}
#box li:nth-child(4){
-webkit-order:-2;
order:-2;
}
</style>
</head>
<body>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>
第2项.flex-grow
Flex项目的扩大比例
如果有必要的话，flex-grow可以定义一个Flex项目的扩大比例。它接受一个没有单位的值作为一个比例。它可以使用Flex项目完全占用Flex容器可用的空间。
如果所有Flex项目的flex-grow设置为1时，表示Flex容器中的Flex项目具有相等的尺寸。如果你给其中一个Flex项目设置flex-grow的值为2，那么这个Flex项目的尺寸将是其他Flex项目两倍（其他Flex项目的flex-grow值为1）。
注意：flex-grow取负值将失效。
弹性盒子分配剩余空间(设置在子元素上)
flex-grow :
0为默认 /*将剩余的空间按照子元素设置的数字的比例来算的*/
分配提成 数字
flex-grow.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex-grow 弹性盒子-按比例分配剩余空间</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:600px;margin:0;padding:10px;list-style:none;background-color:#eee;}
.box li{width:100px;height:100px;border:1px solid #aaa;text-align:center;}
#box li:nth-child(2){
-webkit-flex-grow:1;
flex-grow:1;
}
#box li:nth-child(3){
-webkit-flex-grow:2;
flex-grow:2;
}
</style>
</head>
<body>
<h2>剩余空间被分成了3份</h2>
<ul id="box" class="box">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</body>
</html>
第3项.flex-shrink
如果有必要，flex-shrink可以定义Flex项目的缩小比例。
注意：flex-shrink取负值将失效。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
检索弹性盒的收缩比率(子元素设置)
flex-shrink:
默认:1
数字
注：溢出时计算比例
flex-shrink.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex-shrink 弹性盒子-检索弹性盒的收缩比率</title>
<style>
#flex{display:-webkit-flex;display:flex;width:300px;margin:0;padding:0;list-style:none;}
#flex li{width:200px;height:100px;}
#flex li:nth-child(1){background:#888;}
#flex li:nth-child(2){background:#ccc;}
#flex li:nth-child(3){-webkit-flex-shrink:3;background:#aaa;}
</style>
</head>
<body>
<!--flex-shrink:1 默认是1-->
<p>li被分成5分 a=20% b=20% c=60% 超出总宽度=300 li宽度=200<br/>
a宽度=200-300*20%=140<br/>
b宽度=200-300*20%=140<br/>
c宽度=200-300*60%=20<br/>
</p>
<ul id="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</body>
</html>
第4项.flex-basis
项目占据的主轴空间
flex-basis属性定义了Flex项目在分配Flex容器剩余空间之前的一个默认尺寸。main-size值使它具有匹配的宽度或高度，不过都需要取决于flex-direction的值。
flex-basis: | auto; /* default auto */
如果设置为0，内容不在考虑周围额外空间。如果设置为auto，额外空间会基于flex-grow值做分布。如下图所示：
检索弹性盒伸缩基准值(子元素设置)
flex-basis:
默认:auto就会按照子元素的实际宽度来衡量的
数值
注：计算数值比例
basis.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex-basis 弹性盒子-检索弹性盒伸缩基准值</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:300px;height:300px;margin:10px;padding:10px;list-style:none;
background-color:#eee;
}
.box li{width:100px;height:100px;background:#f99;flex-basis:200px;
/*分配宽度为200px*/}
#box{ flex-direction:row;}/*分配宽度*/
#box2{flex-direction:column;}/*分配高度*/
</style>
</head>
<body>
<ul id="box" class="box">
<li>宽高100px</li>
</ul>
<ul id="box2" class="box">
<li>宽高100px</li>
</ul>
</body>
</html>
第5项.flex
flex是flex-grow，flex-shrink和flex-basis三个属性的缩写。第二个和第三个参数(flex-shrink和flex-basis)是可选值。其默认值是0 1 auto。
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
建议您 使用此简写属性，而不是设置单独属性。注意，如果flex取值为none时，其相当于取值为0 0 auto。
请注意flex-grow与flex-basis的初始值与他们在flex缩写被省略时的 默认值不同。这里的设计是为了让flex缩写在最常见的情景下比较好用
flex常见值
flex: 0 auto,flex: initial与flex: 0 1 auto相同。（这也就是初始值。）根据width／height属性决定元素的尺寸。（如果项目的主轴长度属性的计算值为auto，则会根据其内容来决定元素尺寸。）当剩余空间为正值时，伸缩项目无法伸缩，但当空间不足时，伸缩项目可收缩至其最小值。网页作者可以用对齐相关的属性以及margin属性的auto值控制伸缩项目沿着主轴的对齐方式。
flex: auto与flex: 1 1 auto相同。根据width／height属性决定元素的尺寸，但是完全可以伸缩，会吸收主轴上剩下的空间。如果所有项目均为flex: auto、flex: initial或flex: none，则在项目尺寸决定后，剩余的正空间会被平分给是flex: auto的项目。
flex: none与flex: 0 0 auto相同。根据width／height属性决定元素的尺寸，但是完全不可伸缩。其效果与initial类似，但即使在空间不够而溢出的情况下，伸缩项目也不能收缩。
flex: 与flex: 1 0px相同。该值使元素可伸缩，并将伸缩基准值设置为零，导致该项目会根据设置的比率占用伸缩容器的剩余空间。如果一个伸缩容器里的所有项目都使用此模式，则它们的尺寸会正比于指定的伸缩比率。
伸缩性（设置子元素上）
flex:
按提成分配 数字
0 0 百分比分配
flex.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>flex 弹性盒子-伸缩性</title>
<style>
.box{
display:-webkit-flex;
display:flex;
width:400px;height:100px;padding:10px;list-style:none;background:#eee;}
.box li{background:#aaa;text-align:center;}
.box li:nth-child(1){background:#999;}
.box li:nth-child(2){background:#aaa;}
.box li:nth-child(3){background:#ccc;}
#box li:nth-child(1){-webkit-flex:1;flex:1;}
#box li:nth-child(2){-webkit-flex:2;flex:2;}
#box li:nth-child(3){-webkit-flex:1;flex:1;}
</style>
</head>
<body>
<ul id="box" class="box">
<li>flex:1;</li>
<li>flex:2;</li>
<li>flex:1;</li>
</ul>
</body>
</html>
第6项.align-self
align-self则用来在单独的伸缩项目上覆写默认的对齐方式。（对于匿名伸缩项目，align-self的值永远与其关联的伸缩容器的align-items的值相同。）
align-self: auto | flex-start | flex-end | center | baseline | stretch;
若伸缩项目的任一个侧轴上的外边距为auto，则align-self没有效果。
如果align-self的值为auto，则其计算值为元素的父元素的align-items值，如果该元素没有父元素，则计算值为stretch。对齐属性值的定义如下：
注意：如果伸缩伸缩的高度有限制，此可能导致伸缩项目的内容溢出该项目。
flex-start:伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。
flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。
center:伸缩项目的外边距盒在该行的侧轴上居中放置。（如果伸缩行的尺寸小于伸缩项目，则伸缩项目会向两个方向溢出相同的量）。
baseline:如果伸缩项目的行内轴与侧轴为同一条，则该值和flex-start等效。其它情况下，该值将参与基线对齐。所有参与该对齐方式的伸缩项目将按下列方式排列：首先将这些伸缩项目的基线进行对齐，随后其中基线至侧轴起点边的外边距距离最长的那个项目将紧靠住该行在侧轴起点的边。
stretch:如果侧轴长度属性的值为auto，则此值会使项目的外边距盒的尺寸在遵照min/max-width/height属性的限制下尽可能接近所在行的尺寸。
注意：如果伸缩伸缩的高度有限制，此可能导致伸缩项目的内容溢出该项目。
知识点4.常用应用（居中对齐，自适应导航，移动优先布局）
居中对齐
.flex-container {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
自适应导航
.navigation {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
@media all and (max-width: 800px) {
.navigation {
justify-content: space-around;
}
}
@media all and (max-width: 500px) {
.navigation {
flex-direction: column;
}
移动优先布局
.wrapper {
display: flex;
flex-flow: row wrap;
}
.header, .main, .nav, .aside, .footer {
flex: 1 100%;
}
@media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
@media all and (min-width: 800px) {
.main { flex: 2 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
本文深入探讨响应式设计的概念，解析媒体查询如何根据不同设备调整CSS样式，实现跨平台兼容。详细讲解Flex布局原理，包括Flex容器与项目的属性，以及如何运用Flex布局实现元素的灵活对齐与自适应。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
