html - 当列/行是单个时，周围空间在 chrome 和 firefox 中的行为不同

Question

在 chrome 中，space-around 如果它是单列，则不会使元素居中。但在 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/

编辑:我也可以这样做，但这会使文本右对齐变得困惑:

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

---

编辑:老实说，如果它是一种爱好，我不会太在意，但我在我的应用程序中添加了 cefsharp(chrome)。将投入生产。没有别的办法。我必须在cefsharp中得到那个渲染。

编辑:这不是重复的。

• 我不问为什么它不起作用。我想要一个解决方案
• 我的输出不同。其他问题的输出甚至不是多列。

Answer 1

edit2:我通过 js getboundrect compare get max-width 解决了这个问题，如果发生换行，它们会应用边距。但它凌乱不想使用它。但我必须这样做。

如果您在 doit() 函数中提供适当的 CssSelector，我清理了代码以使其应用所有 flex-container、flex item。它会起作用。但这是针对列的。

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

    };