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），总是士兵的自由是很大的。

原文地址：https://www.cnblogs.com/baihuatian/p/12051268.html