標籤（空格分隔）： 前端學習
彈性布局是一種用於按列或按行布局元素的一維布局方法。元素可以膨脹以填充額外的空間，收縮以適應更小的空間。
flex模型
排列方式
可以通過flex-direction屬性指定主軸的方向。值說明
row橫向(從左向右)排列
column
縱向(自上而下)排列
row-reverse
橫向(自右向左)排列
column-reverse
縱向(自下而上)排列
換行
可以設定flex-wrap: wrap來進行換行
flex-flow
flex-direction和flex-wrap的縮寫flex-flow，例如
flex-direction: row; flex-wrap：wrap;
flex-flow: row wrap;flex項的動態尺寸
設定flex: 1表示每個元素占用空間都是相等的，占用的空間在設定padding和margin之後剩餘的空間。值表示乙個比值
設定flex: 1 200px表示每個flex項將首先給出200px的可用空間，然後剩餘的可用空間將根據分配的比例共享。
flex: 縮寫與全寫
flex是乙個可以指定最多三個不同值的縮寫屬性：
水平和垂直對齊
可以設定flex項沿主軸或交叉軸對齊。
align-items控制flex項在交叉軸上的位置。
justify-content控制flex項在主軸上的位置。
flex項排序
彈性盒子也可以改變flex項的布局位置的功能，而不會影響到源順序(dom樹里元素的順序)。
可以通過設定order: 1來改變flex顯示順序
css3 彈性盒子
display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...
Css3 彈性盒子
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
Css3彈性盒子
css3彈性盒子 fiexbox 1.彈性盒子 隨螢幕放大縮小盒子也放大縮小，不出現滾動條。對容器中的子元素進行排列 對齊和分配。2.彈性盒子 彈性容器 彈性子元素 注 彈性盒子在父元素寫，只定義子元素的布局。乙個彈性容器包含乙個或多個彈性子元素。預設情況每個容器只有一行，彈性子元素在彈性盒子內一行...