Flex布局：實戰

轉載自http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

你會看到，不管是什麼布局，Flex往往都可以幾行命令搞定。

我只列出代碼，詳細的文法解釋請查閱《Flex布局教程：文法篇》。我的主要參考資料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局

骰子的一面，最多可以放置9個點。

下面，就來看看Flex如何?，從1個點到9個點的布局。你可以到codepen查看Demo。

如果不加說明，本節的HTML模板一律如下。

<div class="box">  <span class="item"></span></div>

上面代碼中，div元素（代表骰子的一個面）是Flex容器，span元素（代表一個點）是Flex項目。如果有多重專案，就要添加多個span元素，以此類推。 1.1 單項目

首先，只有左上方1個點的情況。Flex布局預設就是首行靠左對齊，所以一行代碼就夠了。

.box {  display: flex;}

設定項目的對齊，就能實現置中對齊和靠右對齊。

.box {  display: flex;  justify-content: center;}

.box {  display: flex;  justify-content: flex-end;}

設定交叉軸對齊，可以垂直移動主軸。

.box {  display: flex;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: center;}

.box {  display: flex;  justify-content: center;  align-items: flex-end;}

.box {  display: flex;  justify-content: flex-end;  align-items: flex-end;}

1.2 雙項目