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

5.Flex項(xiàng)目移到左邊

flex項(xiàng)目稱(chēng)動(dòng)到左邊或右邊也取決于主軸的方向。如果flex-direction設(shè)置為row，設(shè)置justify-content控制方向；如果設(shè)置為column，設(shè)置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項(xiàng)目移動(dòng)右邊

.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容器中制作水平垂直居中是微不足道的。設(shè)置justify-content或者align-items為center。另外根據(jù)主軸的方向設(shè)置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àng)目實(shí)現(xiàn)自動(dòng)伸縮

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

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