您是否還在爲如何實現DOM元素的垂直居中對齊而撓頭呢?別擔心,朋友。Fitflex爲您提供了一種只需少量Javascript代碼和配置就能輕鬆實現響應式佈局的方法。還有一件事，它可以適應各種屏幕尺寸的手機、平板電腦、臺式電腦……你對此感到興奮嗎?
github
npm
讓我們現在就盤它吧!
UI交互的例子
大致看完文檔後，你可以盤下這個例子，挺有意思的，絕對讓你對CSS佈局有更新的認識。
下載
npm install fitflex
在瀏覽器中使用
<script src="fitflex.js"></script>
然後配置選項來調整元素。
<body>
<div id='box'>
<div class='child1'>child1</div>
<div class='child1'>child1</div>
<div class='child1'>child1</div>
<div class='child2'>child2</div>
<div class='child2'>child2</div>
<div class='child2'>child2</div>
</div>
<script src="fitflex.js"></script>
<script>
var option = {
location:'vertical',
center:'cross'
}
fit('#box').flex(option);
</script>
</body
檢查你的瀏覽器。看,垂直居中!
容器
容器是parentNode，其中childNodes由fitflex來配置。它的用法與jquery $("p").add("div")類似。
fit(container).flex(option)
配置項
var option = {
children: "",
location: "",
center: "",
adjust: "",
gapRatio: {
left: 0,
right: 0,
top: 0,
bottom: 0,
outerAll: 0,
innerWidth: 0,
innerHeight: 0
},
screenWidth: { min: 0, max: Infinity },
flexWhenResize: true
};
| Key | Type | Value |
|---|---|---|
| children | String |Array | 被選中的 childNodes |
| location | String | horizontal, vertical |
| center | String | forward, cross, bothway |
| adjust | String | 三個合併的字符串: oneline|multiline + outerfit|innerfit + forward|cross|bothway. |
| gapRatio | Object | 屬性: left, right, top, bottom, outerall, innerWidth, innerHeight |
| screenWidth | Object | min: numbers, max: numbers |
children
參與佈局的子節點。默認情況下，所有的子節點都將被涉及。
該值可以是elementID或className，例如.child、#child或數組["child1"., ".child2", ".child3"]。
如果您想指定childNodes的寬度和高度，那麼[{d:.child1, w:0.1, h: 0.2}, {d:".child2", w:0.2, height: 0.1}]。
您甚至可以使用二維數組，這樣您就可以將childnode分組到不同的行中，例如[[{d:".child1," w:0.1, h: 0.2}], [{d:".child2", w:0.2, h: 0.1}]]。
請注意，w和h的值不是px，而是childnode的寬高和parentNode寬高之比。
location
horizontal(default) and vertical.
center
forward:以x軸爲中心的子節點;
cross:以y軸爲中心;
bothway: 以X軸和Y軸爲中心.
adjust
此選項用於調整childNodes 邊界和parentNodes 邊界的關係，以便可以使childNodes和parentNodes寬高自動相互匹配。
設置基於3個字符串組合，如:onelineOuterfitForward或multilineInnerfitCross，大小寫不敏感。
oneline:將選擇的子節點強制放到一行中。
multiline: childNodes的放置是基於以前的選項設置。
outerfit: 調整parentNodes內邊界，使之和childNodes外邊界重合
innerfit:調整childNodes 的外邊界，使之和parentNodes的內邊界重合。
forward: 在X-Axis居中.
cross: 圍繞Y-Axis居中
bothway：圍繞both X 和 Y Axis居中
gapRatio
childNodes和parentNodes之間(left, right，top，bottom，outerall)或childNodes之間(innerwidth，innerheight)的間隔距離。請注意，值不是px，它是childNodes寬高與parentNode寬高之比。您也可以設置一個或兩個如下：
innerWidth: 'fit', innerHeight:`fit`
然後，childNode之間的間隙距離最大，使得最外面的childNodes邊界與ParentNodes內邊界重合。
您還可以通過設置數組值來進一步調整子節點之間的行間距或列間距，達到精細的控制。
innerWidth: [0.05, 0.03,...], innerHeight:[0.01, 0.02,...]
請注意，數組單元格值是childNode寬高與parentNode寬高之比。
screenWidth
用於響應式佈局，設置屏幕寬度
flexWhenResize
調整屏幕寬度時調整佈局。
響應式佈局
通過使用option array 而不是一個option，您可以使不同的佈局適應於不同的屏幕寬度。
<script>
var opt1 = {
location:'vertical',
center:'cross',
screenWidth: { min: 501, max: Infinity }
};
var opt2 = {
location:'horizontal',
center:'forward',
screenWidth: { min: 0 , max: 500}
};
var optArray = [opt1, opt2]
fit('#box').flex(optArray);
</script>