弹性盒 flexbil box or flexbox,
css3的一种布局模式,页面可以适应屏幕大小与设备确保元素保持原来布局的方式，由弹性容器flex container,弹性子元素flex item组成，设置display来实现。
x轴代表主轴，从左到右，y轴代表侧轴，从上到下,主轴不一定是水平的，取决于justify-content，伸缩项目放置在伸缩容器内从主轴的起点main-start到终点main-end，主轴的尺寸main-size,伸缩项目在主轴的宽高对着主轴的方向就是主轴的尺寸。
主轴main axis 侧轴cross axis
display:flex|inline-flex
flex-direction:row|row-reverse|column|column-reverse;主轴
flex-wrap:wrap|nowrap|wrap-reverse;设置伸缩子元素在缩小窗口时是否换行
justify-content:flex-start|flex-end|center|space-between|space-around
align-item:flex-start|flex-end|center|base-line|stretch
align-content:flex-start|flex-end|center|space-between|space-around|stretch
display，flex-direction，flex-wrap，justify-content的效果
*{margin: 0;padding: 0;font-size: 18px}
h1{margin: 20px 0 0 0;font-weight:100;clear: both;font-size: 24px}
span{float: left;padding:0 10px;width: 250px}
input{display: block}
section{height: 50px;width: 50px;border: 1px solid #333;line-height: 50px;text-align: center}
#display{border: 1px solid #222;display: flex;padding: 5px;}
#flex-direction{border: 1px solid #222;padding: 5px;display: flex;flex-direction: row}
#flex-wrap{border: 1px solid #222;padding: 5px;display: flex;flex-wrap:nowrap}
#justify-content{height: 100px;;border: 1px solid #222;padding: 5px;display: flex;justify-content: flex-start}
<h1>display</h1>
<span>
flex<input type="radio" name="display" />
inline-flex<input type="radio" name="display" />
</span>
<div id="display">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
<h1>flex-direction</h1>
<span>
row<input type="radio" name="flex-direction" />
row-reverse<input type="radio" name="flex-direction"/>
column<input type="radio" name="flex-direction"/>
column-reverse<input type="radio" name="flex-direction"/>
</span>
<div id="flex-direction">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
<h1>flex-wrap(设置伸缩子元素在缩小窗口时是否换行)</h1>
<span>
nowrap<input type="radio" name="flex-wrap" />
wrap<input type="radio" name="flex-wrap"/>
wrap-reverse<input type="radio" name="flex-wrap"/>
</span>
<div id="flex-wrap">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
</div>
<h1>justify-content</h1>
<span>
flex-start<input type="radio" name="justify-content" />
flex-end<input type="radio" name="justify-content"/>
center<input type="radio" name="justify-content"/>
space-between<input type="radio" name="justify-content"/>
space-around<input type="radio" name="justify-content"/>
</span>
<div id="justify-content">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
</div>
var btnFlex = document.getElementsByTagName("input");
var oDiv = document.getElementsByTagName("div");
/* display */
btnFlex[0].onclick = function (){
if(this.checked){
oDiv[0].style.display = "flex"; }}
btnFlex[1].onclick = function (){
if(this.checked){
oDiv[0].style.display = "inline-flex";}}
/* flex-direction */
btnFlex[2].onclick = function (){
if(this.checked){
oDiv[1].style.cssText = "flex-direction: row";}}
btnFlex[3].onclick = function (){
if(this.checked){
oDiv[1].style.cssText = "flex-direction: row-reverse";}}
btnFlex[4].onclick = function (){
if(btnFlex[4].checked){
oDiv[1].style.cssText = "flex-direction: column";}}
btnFlex[5].onclick = function (){
if(this.checked){
oDiv[1].style.cssText = "flex-direction: column-reverse";}}
/* flex-wrap */
btnFlex[6].onclick = function (){
if(this.checked){
oDiv[2].style.cssText = "flex-wrap: nowrap";}}
btnFlex[7].onclick = function (){
if(this.checked){
oDiv[2].style.cssText = "flex-wrap: wrap";}}
btnFlex[8].onclick = function (){
if(this.checked){
oDiv[2].style.cssText = "flex-wrap: wrap-reverse";}}
/* justify-content */
btnFlex[9].onclick = function (){
if(this.checked){
oDiv[3].style.cssText = "justify-content: flex-start";}}
btnFlex[10].onclick = function (){
if(this.checked){
oDiv[3].style.cssText = "justify-content: flex-end";}}
btnFlex[11].onclick = function (){
if(this.checked){
oDiv[3].style.cssText = "justify-content: center";}}
btnFlex[12].onclick = function (){
if(this.checked){
oDiv[3].style.cssText = "justify-content: space-between";}}
btnFlex[13].onclick = function (){
if(this.checked){
oDiv[3].style.cssText = "justify-content: space-around";}}
align-items的效果
.flex-start{height: 100px;display: flex;border: 1px solid #333;padding: 5px;align-items:flex-start}
.flex-end{height: 100px;display: flex;border: 1px solid #333;padding: 5px;align-items:flex-end}
.center{height: 100px;display: flex;padding: 5px;border: 1px solid #333;align-items:center}
.baseline{height: 100px;padding: 5px;display: flex;border: 1px solid #333;align-items:baseline}
.stretch{height: 100px;padding: 5px;display: flex;border: 1px solid #333;align-items:stretch}
#align-items p{width: 50px;border: 1px solid #333}
<h1>align-items侧轴</h1>
<span>
stretch<input type="radio" name="align-items"/>
flex-start<input type="radio" name="align-items" />
flex-end<input type="radio" name="align-items"/>
center<input type="radio" name="align-items"/>
base-line<input type="radio" name="align-items"/>
</span>
<div id="align-items" class="stretch">
<p style="font-size: 12px">1</p>
<p>2</p>
<p style="font-size: 28px">3</p>
<p style="font-size: 40px">4</p>
</div>
align-content的效果
.cflex-start{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:flex-start;flex-wrap:wrap}
.cflex-end{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:flex-end;flex-wrap:wrap}
.ccenter{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:center;flex-wrap:wrap}
.cspace-between{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:space-between;flex-wrap:wrap}
.cspace-around{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:space-around;flex-wrap:wrap}
.cstretch{height: 300px;display: flex;border: 1px solid #333;padding: 5px;align-content:stretch;flex-wrap:wrap}
<h1>align-content(设置伸缩子元素在缩小窗口时是否换行)</h1>
<span>
stretch<input type="radio" name="align-content"/>
flex-start<input type="radio" name="align-content" />
flex-end<input type="radio" name="align-content"/>
center<input type="radio" name="align-content"/>
space-between<input type="radio" name="align-content"/>
space-around<input type="radio" name="align-content"/>
</span>
<div id="align-content" class="cstretch">
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
<section>6</section>
<section>7</section>
<section>8</section>
</div>
btnFlex[19].onclick = function (){
if(this.checked){
oDiv[5].setAttribute("class","cstretch");}}
btnFlex[20].onclick = function (){
if(this.checked){
oDiv[5].setAttribute("class","cflex-start");}}
btnFlex[21].onclick = function (){
if(this.checked){
oDiv[5].setAttribute("class","cflex-end");}}
btnFlex[22].onclick = function (){
if(this.checked){
oDiv[5].setAttribute("class","ccenter");}}
btnFlex[23].onclick = function (){
if(this.checked){
oDiv[5].setAttribute("class","cspace-between");}}
btnFlex[24].onclick = function (){
if(this.checked){
oDiv[5].setAttribute("class","cspace-around");}}
写在子元素上的属性
flex:none|flex-grow|flex-shrink|flex-basis;默认0 1 auto
复合属性，如果flex:1则计算值为flex:1 1 0;auto则是1 1 auto,none则是0 0 auto
flex-grow:; flex-grow:<number>(default 0)不允许负值，默认0不分配空间，1分配
设置或检索弹性盒的扩展比例，根据弹性盒子元素的扩展因子作为比率来分配剩余空间
flex-shrink:;flex-shrink:<number>(default 1)；
分配超出的空间
flex-basis：设置或检索弹性盒的伸缩基准值，
auto：无特定宽度，取决于其他属性
<length>：用长度值来定义宽度，不能负值
<percentage>:百分比，不能负值
oder:<integer>
设置子元素的出现顺序；integer整数值，可以负值，数值小的排前面，默认0
align-self:auto|flex-start|flex-end|center|baseline|stretch
设置该弹性元素的在侧轴方向上的对齐方式
auto：取决去父元素的align-items值,如果没有，则为stretch
flex-grow
以1比2分配剩余空间，210-50-100=60,60/（1+2）然后等分
.box{width: 210px;height: 30px;;border: 1px solid #333;display: flex}
.box1{width: 50px;background: #f00;flex-grow: 1}
.box2{width: 100px;background:#0f0;flex-grow: 2}
<div class="box">
<div class="box1">是非得失</div><div class="box2">送豆腐豆腐</div>
</div>
flex-shirink
超出的空间是150+100-220=30px，加权总值 150*1+100*2=350
box4被移除的空间比例=150*1/320*40=18.75;150-18.75
box5=100*2/320*40=21.25;100-21.25
.box3{width: 220px;height: 30px;border: 1px solid #333;display: flex}
.box4{width: 150px;background: #f00;flex-shrink: 1}
.box5{width: 100px;background:#0f0;flex-shrink: 2}
<div class="box3">
<div class="box4">是非得失</div><div class="box5">送豆腐豆腐</div>
</div>
flex-basis：flex-shrink默认auto，设置了flex-basis之后，变成了1:6:1分配空间
.ul2{width:600px;height: 200px;background: #999;display: flex;list-style: none;}
.ul2 li{height: 100px;width: 100px;background: #444}
.ul2 li:nth-of-type(2){flex-basis: 600px;background: #555}
<h1>flex-basis</h1>
<ul class="ul2">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
oder属性,子元素排位子
.ul1{height: 100px;width: 600px;background: #999;display: flex;list-style: none;}
.ul1 li{width: 100px;margin-right: 20px;background: #333}
.ul1 li:nth-child(3),.ul1 li:nth-child(5){order: 1;}
<ul class="ul1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>
align-self属性，子元素的侧轴方向起始位置
.ul3{height: 100px;width: 800px;padding: 20px; background: #999;display: flex;list-style: none;}
.ul3 li{width: 100px;margin-right: 20px;background: #333}
.ul3 li:nth-child(1){align-self: auto;}
.ul3 li:nth-child(2){align-self: flex-start;}
.ul3 li:nth-child(3){align-self: flex-end;}
.ul3 li:nth-child(4){align-self: center;}
.ul3 li:nth-child(5){align-self: baseline;padding: 20px}
.ul3 li:nth-child(6){align-self: baseline;}
.ul3 li:nth-child(7){align-self: stretch;}
媒体查询
根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）设定css，由媒体类型和一个或多个的检测媒体特性的条件表达式
可用于检测媒体特性的有width,height、color等，在不改变媒体内容下，为特定设备提供样式
语法一
@media mediatype and|not|only(media feature){};
语法二
<link rel="stylesheet" media="mediatype and|not|only(media feature) href="" />
media query语法支持设备
-：-
all:所有设备；
aural:用于语音和音频生成器
braille：用于触觉反馈设备
embossed:适用于凸点设备（盲文）印刷设备
handheld：用于小型或手提设备
print:打印机
projection:投影图像：幻灯机
screen:计算机显示器,常用
tty:固定间距字符格，如电传打字机和终端
tv:电视
media query语法特性
见图
移动端布局：单位px em
1：百分比(弹性)布局
顶部与底部高度与位置不变，中间条目的左边与右边不随分辨率变化
2：rem等比缩放布局
局部根据分辨率放大缩小
px问题，比较精确，用户放大缩小浏览的时候，改变了字体的大小，页面布局会被打破，这时可以用em:font size of the element(相对于父元素)
rem（web app使用）
font size of the root element;相对于根元素的字体大小的单位。是一个相对单位
好处：等比例所有的屏幕。rem是通过根元素进行适配的，网页的根元素html通过设置字体大小就可以控制rem的大小。
媒体查询
@media screen and (min-width:1000px) {
body {background:#0f0;}
}
@media screen and (min-width:800px) and (max-width:1000px) {
body {background:#f00;}
}
@media screen and (max-width:800px) {
body{background:#00f;}
}
/* rem（web app使用）用根元素的font-size作为单位去匹配所有的单位 */
@media screen and (min-width:1000px) {
html{font-size: 48px;}
}
@media screen and (max-width: 800px) and (min-width:1000px) {
html{font-size: 36px;}
}
@media screen and (min-width:800px) {
html{font-size: 24px;}
}
.input2{width: 3rem;height: 2rem;background: #0ff;border: none;color: #fff;font-size: 1rem}
<h1>rem（web app使用）</h1>
<input class="input2" value="确定" type="submit">
练习
.div{display:flex;flex-wrap: nowrap;background: #999;padding: 10px;width: 600px}
.div div{transition: all 0.5s;height: 100px;width: 200px;border:solid 1px #111;}
.div div:nth-child(1){background: url("../img/1.jpg")}
.div div:nth-child(2){background: url("../img/2.jpg")}
.div div:nth-child(3){background: url("../img/3.jpg")}
.div div:nth-child(4){background: url("../img/4.jpg")}
.div div:nth-child(5){background: url("../img/3.jpg")}
.div div:hover{width:400px}
<h1>练习</h1>
<div class="div">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>