display
: flex | inline-flex ;
display確定是否啟用flexbox布局，flexbox布局下的子元素無論是內聯元素的還是塊狀元素都會flex流的布局方式進行空間分配
flexdirection
: row | row-reverse | column | column-reverse;
values
description
row（預設）
子元素在ltr排版方式下從左向右排列；在rtl排版方式下從右向左排列
row-reverse
與row排列方向相反，在ltr排版方式下從右向左排列；在rtl排版方式下從左向右排列
column
類似於row但是是頂部到底部 column-reverse：類似於row-reverse但是是底部到頂部
flexwrap
: nowrap | wrap | wrap-reverse;
values
description
nowrap（預設)
子元素以單行顯示，在ltr下自左向右；在rtl下自右向左
wrap
子元素可以以多行顯示，在ltr下自左向右；在rtl下自右向左
wrap-reverse
子元素可以以多行顯示，與wrap相反
justifycontent
: flex-start | flex-end | center | space-between | space-around;
values
description
flex-start（預設）
子元素從一行的起始處開始放置
flex-end
子元素會從一行的結尾處開始放置
center
子元素會集中在一行的**
space-between
子元素會被均勻的分布在行內，兩端與父容器無間隙
space-around
子元素會均勻的按照等距離分布在一行
效果如下圖
與主軸垂直的方向成為側軸，alignitems用來定義側軸方向上的對齊方式
values
description
flex-start
子元素在側軸起點邊的外邊距緊靠住該行在側軸起始的邊
flex-end
子元素在側軸起點邊的外邊距緊靠改行在側軸結尾的邊
center
子元素會被放置在側軸的**
baseline
子元素會根據他們的基線對齊
stretch（預設）
在側軸方向上拉伸子元素以致填充滿flexbox容器。
效果如下圖
根據在側軸上的額外空間來排列容器的行，aligncontent與alignitems的作用類似，但是只對多行的flex布局才有效果，對單行布局沒有效果
values
description
flex-start
行會緊靠容器的起始位
flex-end
行緊靠容器的結束位
center
行緊靠容器的中間位
space-between
每行會均勻分布；首行在容器起始處而最後行在容器結束處
space-around
每行根據相同的距離均勻的分布
stretch（預設）
每行將會伸展以占用剩餘的空間
使用效果如下圖
flexflow
: 『flex-direction』 『flex-wrap』
flex
: flex-grow flex-shrink flex-basis;
values
description
flex-grow
乙個數字，規定專案將相對於其他靈活的專案進行擴充套件的量。 預設值 0
flex-shrink
乙個數字，規定專案將相對於其他靈活的專案進行收縮的量。預設值 1
flex-basis
專案的長度。合法值：「auto」、「inherit」 或乙個後跟 「%」、「px」、「em」 或任何其他長度單位的數字。預設值 auto
寬度 ＝ 彈性寬度 * ( flexgrow / sum( flexgorw ) )
alignself
:'auto | flex-start | flex-end | center | baseline | stretch'
;
alignself屬性允許單個元素有與其他元素不一樣的對齊方式，可覆蓋alignitems屬性。預設值為auto，表示繼承父元素的alignitems屬性，如果沒有父元素，則等同於stretch。 flex 右對齊 flex布局
主要屬性及使用方法 1.flex direction 主柱的方向，div的排列，水平還是垂直 row 水平，起點在左端 column 垂直方向，起點在上方 row reverse 水平，起點在右端 column reverse 垂直，起點在下方 2.flex wrap 水平排不下的情況如何換行 no...
彈性布局 flex對齊
flex對齊方式與主軸和交叉軸所在的方向有關,而flex direction是控制方向的。主軸 justify content justify content對齊方式共有5種對齊方式 flex start 主軸起點邊緣開始，從左向右。flex end 主軸終點邊緣開始，從右向左。center 主軸中...
flex學習 FLEX框架布局方式
在html布局是件頭疼的事情，通過 布局倒是簡單方便，但太死板，並且影響網頁開啟速度從而不利於seo！大多通過div css來布局，這並不是一件很容易的事情，除了要精通css和html以外，還要考慮各種瀏覽器相容！我們可以對比html的布局來學習flex布局。在flex4中有四個flex框架布局類 ...