display flex容器的屬性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction屬性決定主軸的方向（即專案的排列方向）。
.box
flex-direction屬性
–row（預設值）
主軸為水平方向，起點在左端
row-reverse
主軸為水平方向，起點在右端
column-reverse
主軸為垂直方向，起點在下沿
column
主軸為垂直方向，起點在上沿
flex-wrap
預設情況下，專案都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。
.box
flex-wrap屬性
–nowrap（預設）
不換行wrap
換行，第一行在上方
wrap-reverse
換行，第一行在下方
flex-flow
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
.box
align-items
–flex-start
交叉軸的起點對齊
flex-end
交叉軸的終點對齊
center
交叉軸的中點對齊
baseline
專案的第一行文字的基線對齊
stretch（預設值）
如果專案未設定高度或設為auto，將佔滿整個容器的高度
小程式學習之小程式框架 flex布局
1.基本概念 1 flex模型 當頁面需要適應不同螢幕尺寸以及裝置型別時該模型可以確保元素在恰當的位置 2 容器和專案 用於包含內容的元件是容器，容器內部元件是專案。容器允許包含巢狀。3 座標軸 預設水平布局，水平從左向右是主軸，垂直從上到下是交叉軸。可用flex direction column互...
微信小程式之flex布局
flex布局 flex布局的特點 設有display flex或者display block的元素就是乙個flex container 伸縮容器 裡面的子元素稱為flex item 伸縮專案 flex container中子元素都是使用flex布局排版。display flex 指定為行內容器模式，...
微信小程式之flex布局
flex布局在做前端的時候十分的方便快捷，這裡學習了一下分享給大家 flex flexible box 彈性布局盒模型 是2009年w3c提出的一種可以簡潔 快速彈性布局的屬性。主要思想是給予容器控制內部元素高度和寬度的能力。目前已得到以下瀏覽器支援 簡單解釋一下概念圖，就是說flex支援橫向布局和...