Flexbox規(guī)范版本眾多，瀏覽器對此語法支持度也各有不同，接下來的內容以最新語法版本為例向大家展示：（接上一節(jié)）

5.Flex項目移到左邊

flex項目稱動到左邊或右邊也取決于主軸的方向。如果flex-direction設置為row，設置justify-content控制方向；如果設置為column，設置align-items控制方向。

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; align-items: flex-start; }

6.Flex項目移動右邊

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-end; justify-content: flex-end; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; }

7.水平垂直居中

在Flexbox容器中制作水平垂直居中是微不足道的。設置justify-content或者align-items為center。另外根據(jù)主軸的方向設置flex-direction為row或column。

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

.flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }

8.Flex項目實現(xiàn)自動伸縮

您可以定義一個flex項目，如何相對于flex容器實現(xiàn)自動的伸縮。需要給每個flex項目設置flex屬性設置需要伸縮的值。

.bigitem{ -webkit-flex:200; flex:200; }  .smallitem{ -webkit-flex:100; flex:100; }