HTML5 For Windows Store学习（1）

上周拿到了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
}

信息量有点大。

这是我的个人日记本