edit2: I solved it via js getboundrect compare get max-width of each item them apply margin if wrap happens. but its messy don't wanna use it. but I have to.
I cleaned up the code to make it apply the all flex-container, flex item if you give appropriate CssSelector in the doit() function. it will work. but this is for columns.
http://jsfiddle.net/yeaqrh48/1203/
var debug = true;
class ertTimer {
constructor(funcName ,intervalms=3500, maxRunDuration=20000 , StopIfReturnsTrue=true ) {
this.intervalObj = setInterval(function(){
console.log("interval - funcName:" + funcName.name);
try{
var res = funcName();
if(StopIfReturnsTrue)
if(res == true)
clearInterval(intervalObj);
} catch(exx){console.warn(exx.message, exx.stack);}
}, intervalms);
// after 15 sec delete interval
setTimeout( function(){ clearInterval( intervalObj ); },maxRunDuration);
this.intervalms = intervalms;
this.maxRunDuration = maxRunDuration;
}
get getter_intervalms() { return this.intervalms; }
calcRepeatTimes() {
return this.maxRunDuration / this.intervalms;
}
}
var center_ONsingleCol_nonFF = function(contNode, itemSelector) {
var items = contNode.querySelectorAll(itemSelector);
//arr.count shoud be 1 element // items[0].style.alignItems = "center";
var parItem = items[0].parentNode;
var parItemR = parItem.getBoundingClientRect();
var parWidth = parItemR.width;
var maxItemWidth = 0;
for (var k = 0; k < items.length; k++) {
var currItem = items[k].getBoundingClientRect();
if (currItem.width > maxItemWidth)
maxItemWidth = currItem.width;
//console.log(parWidth, itemWidth);
}
var alignItemsVal = getComputedStyle_propValue(parItem , "align-items");
var flexDirVal = getComputedStyle_propValue(parItem , "flex-direction");
var iswrapped = isWrapped(contNode ,itemSelector );
for (var k = 0; k < items.length; k++) {
if(iswrapped && flexDirVal == "column" ){
if(alignItemsVal == "flex-end"){
items[k].style.marginRight = "" + ((parWidth - maxItemWidth) * 0.5) + "px";
items[k].style.marginLeft = "";
}
else if(alignItemsVal == "flex-start"){
items[k].style.marginRight = "";
items[k].style.marginLeft = "" + ((parWidth - maxItemWidth) * 0.5) + "px";
}else
{
items[k].style.marginRight = "";
items[k].style.marginLeft = "";
}
}
else{
items[k].style.marginRight = "";
items[k].style.marginLeft = "";
}
}
};
var getComputedStyle_propValue = function(element , CssPropName){
//var element = document.querySelector( selector );
var compStyles = window.getComputedStyle(element);
var comStyle_xxx = compStyles.getPropertyValue(CssPropName);
return comStyle_xxx;
};
var colorizeItem = function(items) {
for (var k = 0; k < items.length; k++) {
items[k].style += ";background:Red;";
}
};
var detectWrap = function(contNode, item_selector) {
var wrappedItems = [];
var prevItem = {};
var currItem = {};
var items = contNode.querySelectorAll(item_selector);
//console.log("wrapped item arrrat::",items);
for (var i = 0; i < items.length; i++) {
currItem = items[i].getBoundingClientRect();
if (prevItem && prevItem.top > currItem.top) {
wrappedItems.push(items[i]);
}
prevItem = currItem;
}
return wrappedItems;
};
var isFirefox = function() {
var _isFF = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
return _isFF;
};
var isWrapped = function(contNode, item_selector){
var wrappedItems = detectWrap(contNode, item_selector);
//colorizeItem(wrappedItems);
if (wrappedItems == null || wrappedItems.length == 0)
return true;
else
return false;
};
var isWired_listenContResize = false;
var doit = function() {
if (isFirefox()) {
console.log("ff already works Right. ");
return;
} else {
console.log("not ff. script will run. ");
}
/* flexItem_selector must be relative to flexCont*/
var flexContainer_selector = ".flex-cont.cont-resize"; /*specific flex-cont */
var flexItem_selector = ".flex-item";
var contList = document.querySelectorAll(flexContainer_selector);
for (var i = 0; i < contList.length; i++) {
//no such event //there is external lib..
// call doit after you change size in the code;
if (!isWired_listenContResize) {
contList[i].onresize = function() { doit(); };
}
center_ONsingleCol_nonFF(contList[i], flexItem_selector);
}
isWired_listenContResize = true;
};
window.onresize = function(event) { doit(); };
window.onload = function(event) {
doit();
const et1_ = new ertTimer(doit , 500, 320000,true );
};
