В Chrome vs Firefox, когда столбец / строка одиночные, ведут себя по-разному.

Question

в chrome, пробел не центрирует элементы, если он находится в одном столбце.но в Firefox это работает.

как заставить его вести себя как firefox?

также помните, что текст выровнен по правому краю

---

.flex-cont {
  display: flex;
  justify-content: flex-start;
  flex-flow: column wrap;
  align-content: space-around;
  align-content: space-evenly;
  align-items: flex-end;
}

.flex-item {
  /* display: inline-block; */
  flex: 0 1 auto;
  width: fit-content;
}

http://jsfiddle.net/f6k7xoe0/1/

edit: также я могу сделать это, но это портит выравнивание текста вправо:

.flex-cont{
  align-items: center;
}

---

edit: честно, я бы не сталМне было бы все равно, если бы это было хобби, но я добавил cefsharp (chrome) в свое приложение.будет в производстве.нет другого пути.Я должен получить этот рендер в cefsharp.

edit: это не дубликат.

• Я не спрашиваю, ПОЧЕМУ это не работает.Я хочу решение
• мой вывод отличается.вывод по другим вопросам даже не многостолбцовый.

Answer 1

edit2: я решил это с помощью js getboundrect сравнить, получить максимальную ширину каждого элемента, они применяют поля, если происходит перенос.но это грязно, не хочу его использовать.но я должен.

Я очистил код, чтобы он применил весь flex-контейнер, flex-элемент, если вы зададите соответствующий CssSelector в функции doit ().это будет работать.но это для столбцов.

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 );

    };