現在都很流行流式布局display:flex;，但是就是老是記不住他們的型別，今天抽空梳理咯一下父元素與子元素的他們各自擁有的屬性（紅色部分是我經常使用到的）
父元素擁有的屬性
1、flex-direction 設定主軸對齊方式
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
2、flex-wrap 子元素換行的方式 預設nowrap ；
nowrap（預設值）：預設不換行。
wrap：換行，第二行在第一行下面，從左到右
wrap-reverse：換行，第二行在第一行上面，從左到右；
3、flex-flow flex-direction和flex-wrap的簡寫 預設row nowrap；
flex-flow：flex-direction|flex-wrap ；
4、justify-content 子元素的對齊方式 預設flex-start 左對齊
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框間隔大一倍。
5、align-items 子元素對齊方式
flex-start：交叉軸的起點對齊（頭部對齊）。
flex-end：交叉軸的終點對齊。（底部對齊）
center：交叉軸的中點對齊。（垂直居中對齊）
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
6、align-content 屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。
所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸。
子元素擁有的屬性
1、order 改變子元素的順序
order 子元素排列的位置預設是按照html先後順序來排列的，
html結構誰在前面預設就排列在前面； order：預設（0） 值越小越靠前，
2、flex-grow 放大比例 預設是0 當有放大空間的時候，值越大，放大的比例越大
3、flex-shrink 縮小比例 預設是1 值越大，縮小的時候比例越小；
4、flex-basis
屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）
flex-basis:10px(如果專案有多餘的空間，設定為100px。那麼會放大到100的寬度)
5、flex
屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。後兩個屬性 可選。
6、align-self
屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch
除了auto是表示繼承父元素，其他的跟align-items是一樣的。
以上就是我統計的關於流式布局的一些屬性，具體的樣式效果wo我暫時不截圖咯，你們可以自己在電腦上操作試一下看效果
flex布局學習
內容 flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。設為 flex 布局以後，子元素的float clear和vertical align屬性將失效 採用 flex 布局的元素，稱為 flex 容器 flex...
flex布局學習
flex flexible box 是一種彈性布局，用於盒狀模型 任何一種容器都可以指定為flex布局 box注意 行內元素使用display flex 會變成塊級元素 行內元素可以使用inline flex進行flex布局 box注意 設定為flex布局之後，子元素的float clear和ver...
布局管理 流式布局
2007 11 16 14 18 使用流式布局管理器時，gui元件將按照新增入容器的順序自左而右排列在一行上，如果一行空間不足，則另起一行。預設情況下，元件是劇中排列的。可以通過改變面板的預設布局管理器來改變元件在每一行上的排列位置。語句示例如下 flowlayout fl new flowlayo...