flex是flexible box的縮寫，意為」彈性布局」，用來為盒狀模型提供最大的靈活性。是css3的新布局方式，父元素是容器，子元素叫專案
任何乙個容器都可以指定為flex布局。
.box.box.box平常寫多個div他會豎著一列，但想要讓div橫著一排，要是用position，float，或display屬性，如果使用傳統的浮動，文件會脫離瀏覽器，父元素也會沒有高度，而flex簡單許多，修改父元素的display:flex
flex-direction 決定主軸的方向
屬性值：
2.flex-wrap 如果一條軸線排不下，如何換行。
屬性值：
3.flex-flow 是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap
4.justify-content 定義專案在主軸上的對齊方式。
屬性值：
對齊方式與軸的方向有關
5.align-items 定義專案在交叉軸上如何對齊。
屬性值：
對齊方式與交叉軸的方向有關
6.align-content ⽤於修改 flex-wrap 屬性的⾏為。設定各個⾏的對齊
屬性值;
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
以下6個屬性設定在專案上。
order屬性定義專案的排列順序。數值越小，排列越靠前，預設為0。
.item.item.itemflex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。
.item.item.itemflex布局概念
彈性布局 塊元素display flex 行內元素display inline flex 設為flex布局後，子元素的float clear vertical align屬性將失效 flex 布局的元素，稱為 flex 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 容器預設存在兩根軸 ...
flex布局的屬性
flex布局的核心概念是軸和容器，容器包括外層的父容器和內層的子容器，軸包括主軸 預設水平 和交叉軸 預設垂直 一 開啟flex布局 父容器設定屬性值 display flex 若父容器為行內元素 display inline flex webkit核心的瀏覽器 display webkit fle...
Flex 布局 容器屬性
flex 布局，意為 彈性布局 任何乙個容器都可以指定為 flex 布局，行內元素也可以使用 flex 布局。注意 設為 flex 布局後，子元素的 float clear 和 vertrical align 屬性都將失效。採用 flex 布局的元素，稱為 flex 容器，簡稱容器 它的所有子元素自...