上周拿到了MCTS-WPF，觉得XAML+C#终究有些危险，打算学学html5+CSS3+JS了，虽然以前学过，但没做过BS所以没用过。
这次的目标是MCSD Developing Windows Store Applications With HTML5
1：Flexbox
a.水平布局的Flexbox
新建一个js的windows store 空项目，习惯性的先把dark样式改为light好看一些
<body>
<div class="flexbox fragment">
<!--<header aria-label="Header content" role="banner">
<button class="win-backbutton" aria-label="back"></button>
<h1 class="titlearea win-type-ellipsis">
<span class="pagetitle">Flexbox</span>
</h1>
</header>-->
<section aria-label="main content" role="main" class="swiper">
<div>
<h2>Simple Flexbox</h2>
<div class="explation">a flexbox setting the display property to -ms-flexbox</div>
<div id="flexboxSimple">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</section>
</div>
</body>
这里放置了一个id为flexboxSimple的大div，嵌套了6个小div，希望它能够用来展示类似一横排图片的样式，下面修改css
/*flexSimple*/
.flexbox #flexboxSimple {
display:-ms-flexbox;/*重点*/
100%;/*此处不必设置高度，会被小div“顶”起来*/
border:1px solid gray;
}
.flexbox #flexboxSimple > div {/*定义了选择器（大于号选择了flexboxSimple下属的所有小div）*/
min-140px;
min-height:140px;
border:1px solid black;
margin:5px
}
这样，元素就一个一个的横向排列了。
b.横向流式布局
上面的Div右侧为空，如何把多余的空间利用起来，就需要下面这种方式
<body>
<div class="flexbox fragment">
<section aria-label="main content" role="main" class="swiper">
<div>
<h2>Flexbox Distribute</h2>
<div class="explation">a flexbox setting the -ms-flexbox-pack to distrubute</div>
<div id="flexboxSimple">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</section>
</div>
</body>
/*flexDistribute*/
.flexbox #flexboxSimple {
display:-ms-flexbox;/*重点*/
-ms-flex-pack:distribute;/*-ms-flex-属性名，定义如何分配空余空间*/
100%;/*此处不必设置高度，会被小div“顶”起来*/
border:1px solid gray;
}
.flexbox #flexboxSimple > div {/*定义了选择器（大于号选择了flexboxSimple下属的所有小div）*/
min-140px;
min-height:140px;
border:1px solid black;
margin:5px
}
c.按百分比横向布局
当不同的块级元素需要不同的宽度，按以下方式填充
<body>
<div class="flexbox fragment">
<section aria-label="main content" role="main" class="swiper">
<div>
<h2>Flexbox Distribute</h2>
<div class="explation">min-width was set to 80px,the other two grid's width was set to 1/3 and 2/3 base on the avilable space</div>
<div id="flexboxSimple">
<div></div>
<div></div>
<div></div>
</div>
</div>
</section>
</div>
</body>
/*flexbox distribute by persentage*/
.flexbox #flexboxSimple {
display:-ms-flexbox;/*重点*/
100%;/*此处不必设置高度，会被小div“顶”起来*/
border:1px solid gray;
}
.flexbox #flexboxSimple > div {/*定义了选择器（大于号选择了flexboxSimple下属的所有小div）*/
min-140px;
min-height:140px;
border:1px solid black;
margin:5px
}
.flexbox #flexboxSimple > div:nth-child(2) {/*定义了伪选择器，选择了div中的第二个子元素*/
-ms-flex:10 auto;
}
.flexbox #flexboxSimple > div:nth-child(3) {
-ms-flex:20 auto;
}
d.自动换行的横向布局
wrapping方式布局，到页面边缘自动换行
<body>
<div class="flexbox fragment">
<section aria-label="main content" role="main" class="swiper">
<div>
<h2>Flexbox Wrapping</h2>
<div class="explation">when reach to the edge of the page,the div wrapping automatic</div>
<div id="flexboxSimple">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</section>
</div>
</body>
/*flexbox distribute by wrapping*/
.flexbox #flexboxSimple {
display:-ms-flexbox;/*重点*/
-ms-flex-wrap:wrap;/*重点，换行*/
100%;/*此处不必设置高度，会被小div“顶”起来*/
border:1px solid gray;
}
.flexbox #flexboxSimple > div {/*定义了选择器（大于号选择了flexboxSimple下属的所有小div）*/
min-140px;
min-height:140px;
border:1px solid black;
margin:5px
}
e.垂直排列
<body>
<div class="flexbox fragment">
<section aria-label="main content" role="main" class="swiper">
<div>
<h2>Flexbox Vertical</h2>
<div class="explation">distribute the div by vertical</div>
<div id="flexboxSimple">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</section>
</div>
</body>
/*flexbox distribute by vertical*/
.flexbox #flexboxSimple {
display:-ms-flexbox;/*重点*/
-ms-flex-direction:column;/*按列布局*/
-ms-flex-align:start;/*可以使小div左对齐，并按最小宽度排列，若无这一属性则每一个div将和大div一样宽*/
100%;/*此处不必设置高度，会被小div“顶”起来*/
border:1px solid gray;
}
.flexbox #flexboxSimple > div {/*定义了选择器（大于号选择了flexboxSimple下属的所有小div）*/
min-140px;
min-height:140px;
border:1px solid black;
margin:5px
}
信息量有点大 。