Flex 基礎文法（一），flex基礎文法

Flex 基礎文法（一），flex基礎文法

任何一個容器都可以指定為Flex布局。

.box{  display: flex;}

行內元素也可以使用Flex布局。

.box{  display: inline-flex;}

Webkit核心的瀏覽器，必須加上-webkit首碼。

.box{  display: -webkit-flex; /* Safari */  display: flex;}

注意，設為Flex布局以後，子項目的float、clear和vertical-align屬性將失效。

採用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子項目自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。

容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）

以下6個屬性設定在容器上。

 

  
flex-direction
  
flex-wrap
  
flex-flow
  
justify-content
  
align-items
  
align-content