弹性布局
网页内容要可以随显示设备的大小而动态调整布局
float属性，的确可以实现根据显示设备大小，自动换行显示。但是，浮动定位float提供的可控制的属性太少了，以至于难于随心所欲的控制布局。
比如：多个元素浮动在一行中时，无法保证屏幕变小时，一行中的每个元素都自动等比例缩小。而是每个元素依然保持固定的宽度。就会导致，原本处在一行的元素，被挤压换行。
弹性布局就很好的解决了多种设备下自适应和灵活定制布局的目的
弹性布局主要定义父元素中子元素的布局方式，让布局能适用多种情况提供最大灵活性
概念：
容器
父元素
项目
多个子元素
主轴
子元素排列方向上的轴，默认从左向右
交叉轴
与主轴方向垂直的轴。默认从上到下
父元素上设置的属性
display:flex
父元素变成弹性布局渲染区域
flex-direction
指定容器主轴的排列方向
row：默认从左向右
row-reverse：从右向左
column：从上到下
column-reverse:从下到上
flex-wrap
当主轴排列不下所有元素时，是否自动换行
默认nowrap
父元素空间不够，也不换行！所有子元素项目自动等比缩小。
wrap
当内容放不下时，自动换行，不缩小
flex-flow
flex-direction + flow-wrap的简写形式
语法: flex-flow: flex-direction flex-wrap
justify-content
定义项目在主轴上的对齐方式
取值
flex-start
以主轴起点对齐，默认左对齐，从左向右排列
flex-end
以主轴终点对齐，默认右对齐，从右向左排列
center
在主轴上居中对齐
space-between，表示两端对齐
第一个元素紧贴最左边，最后元素紧贴最右边。中间多个元素在剩余空间中等间距排列
space-around，表示每个项目两端间距相同
所有元素均分空白间距，包括第一个元素左边间距和最后一个元素右边间距，均是等距离分布
align-items
定义所有子元素在交叉轴上的对齐方式
取值
flex-start，
表示让项目以交叉轴的起点方向对齐
默认置顶对齐
flex-end，
表示让项目以交叉轴的终点方向对齐
默认置底对齐
center，
表示让项目以交叉轴的中线居中对齐
垂直方向居中对齐
baseline，
表示让项目以交叉轴的基线对齐
以内容文字的基线对齐
stretch，
表示如果项目未设置尺寸，就让项目在交叉轴上占满所有空间
所有子元素项，垂直方向拉伸，默认沾满高度
每个子元素项目可单独设置的属性
order
专门定义项目在主轴上的排列顺序
其值为整数数字，无需单位。
值越小，越靠近起点；值越大，越靠近结尾，默认值都是0。
flex-grow
专门定义项目的放大比例
如果容器有足够的空间，项目可以放大
其值为整数数字，无需单位。
默认情况，项目不放大。默认值都是0
取值越大，占据剩余的空间越多。
取值都一样，则占据空间始终一样大
flex-shrink
专门定义项目的缩小比例
如果容器空间不足时，项目可以缩小。
缩小的比例取决于flex-shrink的值。
其默认值为1，表示空间不足时，则等比缩小。
可改为0，表示不缩小。
align-self
专门单独定义某一个项目在交叉轴上的对齐方式
与align-items属性对比
align-self定义在项目上，只约束当前所在的一个项目。
其取值和align-items完全一样。只是多了一个auto值，表示继承父元素的align-items效果。
sass的常用功能
变量
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
嵌套
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
引用父级选择器"&"
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
无论CSS规则嵌套的深度怎样，关键字"&"都会使用父级选择器级联替换全部其出现的位置：
/*===== SCSS =====*/
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
/*===== CSS =====*/
#main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover {
color: red;
}
"&"必须出现在复合选择器开头的位置，后面再连接自定义的后缀
/*===== SCSS =====*/
#main {
color: black;
&-sidebar { border: 1px solid; }
}
/*===== CSS =====*/
#main {
color: black; }
#main-sidebar {
border: 1px solid;
}
嵌套属性
/*===== SCSS =====*/
.demo {
// 命令空间后带有冒号:
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
/*===== CSS =====*/
.demo {
font-family: fantasy;
font-size:0pt; color:#333333;"> font-weight: bold; }
引入
// _reset.scss
html, body, ul, ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}
混合
混合（Mixin）用来分组那些需要在页面中复用的CSS声明，开发人员可以通过向Mixin传递变量参数来让代码更加灵活，
该特性在添加浏览器兼容性前缀的时候非常有用，
SASS目前使用@mixin name指令来进行混合操作。
@mixin border-radius($radius) {
border-radius: $radius;
-ms-border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
.box {
@include border-radius(10px);
}
继承
// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
display: flex;
flex-wrap: wrap;
}
// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.message {
@extend %message-common;
}
.success {
@extend %message-common;
border-color: green;
}
.error {
@extend %message-common;
border-color: red;
}
.warning {
@extend %message-common;
border-color: yellow;
}
算术运算符
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}
0.5px的线如何实现
问题:
.hr.half-px {
height: 0.5px;
}
不同设备，不同浏览器差异较大
解决:
.hr.scale-half {
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%; /*为了防止线模糊*/
}
更好的解决: svg
.hr.svg {
background: none;
height: 1px;
background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
}
其中: svg图片是
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'>
<line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line>
</svg>
使用svg的line元素画线，stroke表示描边颜色，默认描边宽度stroke-width="1"，由于svg的描边等属性的1px是物理像素的1px，相当于高清屏的0.5px，另外还可以使用svg的rect等元素进行绘制。
但是在firefox挂了
解决: 把svg转为base64
.hr.svg {
background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzFweCc+PGxpbmUgeDE9JzAnIHkxPScwJyB4Mj0nMTAwJScgeTI9JzAnIHN0cm9rZT0nIzAwMCc+PC9saW5lPjwvc3ZnPg==");
}
优点，可以利用svg画出各种图形的0.5px线条
