flex弹性盒模型

主要是两个对象:设置为弹性盒的大盒子,和包裹在弹性盒里面的小盒子,类似于排列布阵,我使用排兵布阵的方式来做比喻

对于大将军:首先,最最重要的是先有个名分    display:flex;    

成功当上大将军之后,就可以沙场排兵布阵了

此时十多个士兵在一个长宽分别可以站六个人的场地内

他们站成一排,超过了场地的范围,因此作为大将军,可以下达指令    flex-wrap   来命令他们换行

这个指令有三个选项:

一是nowrap:这就是初始的默认值,就是这个指令导致了他们超出了场地

二是wrap:可以让超出范围的士兵排到第二排

三是wrap-reverse:如果第一排的士兵个子较高,就可以让第一排站到后面去,场地外的四个士兵站到第一排。

不论是第二种还是第三种,此时有两排是个士兵排列在你的面前。

有一行只有四个人!!!!!

是时候行驶将军的特权了,我可以让他们靠左边站(jusitify-content:flex-start),我可以让他们靠右边站(jusitify-content:flex-end),我可以让他们站在正中心(jusitify-content:center),我可以让他们等间距站(jusitify-content:space-between),我还可以让他们离两边有一定的距离,但是中间部分等分站,玩弄小士兵就很有趣嘛。

我可以让这四个人靠左边站(flex-direction:flex-start),靠右边逆序站(flex-direction:flex-end),从上到下(flex-direction:column),从下到上(flex-direction:column-reverse)

对于这四个人,我还可以让他们在脚底下垫石头让他们看起来一样高(align-items:flex-start),或者高低不一(align-items:flex-end),或者是从腰部对齐(center),或者是从他们胸前写的那个卒字对齐(align-items:baseline)。不一而足

 


对于这四个人自己,他们也有对应的标识(order),数字越大则地位越高,站的位置越靠前,每个人还有权利决定自己和其他人的不同之处(align-self),还可以决定自己所占空间的大小(flex),总是士兵的*是很大的。

上一篇:开启IIS的WebGarden、WebFarm和StateServer之旅


下一篇:todo sourcecode