學習垂直水平置中css flex

https://dotblogs.com.tw/leo_codespace/2018/05/02/154954


青蛙學習
https://flexboxfroggy.com/#zh-tw

花園版
http://cssgridgarden.com/

justify-content這個屬性可以水平對齊元素

 
flex-start: 元素和容器的左端對齊。
flex-end: 元素和容器的右端對齊。
center: 元素在容器裏居中。
space-between: 元素之間保持相等的距離。
space-around: 元素周圍保持相等的距離。

舉個例子，justify-content: flex-end;會將青蛙移到右邊。

現在用align-items來幫助青蛙們到池塘的底部。
這個CSS屬性縱向對齊元素並且可選以下幾個值：

flex-start: 元素與容器的頂部對齊。
flex-end: 元素與容器的底部對齊。
center: 元素縱向居中。
baseline: 元素在容器的基線位置顯示。
stretch: 元素被拉伸以填滿整個容器。

青蛙們需要和他們的荷葉保持對應的順序。我們可以用flex-direction屬性。這個CSS屬性定義了元素在容器裏擺放的方向，並且接受這些值：

• row: 元素擺放的方向和文字方向一致。
• row-reverse: 元素擺放的方向和文字的方向相反。
• column: 元素從上放到下。
• column-reverse: 元素從下放到上。

有時候僅僅調轉列或行的方向是不夠的。在這些情況，我們可以設置單個元素的order屬性。元素的屬性默認值爲0，但是我們設置這個屬性爲正數或負數。

用order來調整青蛙的順序。

order:3;

哦不！這些青蛙都擠到一列了。用flex-wrap屬性把它們分散看看。這個屬性接受這些值：

• nowrap: 所有的元素都在一行。
• wrap: 元素自動換成多行。
• wrap-reverse: 元素自動換成逆序的多行。

青蛙們在池塘裏到處都是，然而荷葉都在頂部。你可以使用align-content來決定行與行之間隔多遠。這個屬性接受這些值：

• flex-start: 多行都集中在頂部。
• flex-end: 多行都集中在底部。
• center: 多行居中。
• space-between: 行與行之間保持相等距離。
• space-around: 每行的周圍保持相等距離。
• stretch: 每一行都被拉伸以填滿容器。

這可能有些容易混淆，但align-content決定行之間的間隔，而align-items決定元素整體在容器的什麼位置。只有一行的時候align-content沒有任何效果。