在 Chrome 和 Firefox 中，当列 / 行只有一个时，space-around 的表现不同。

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中得到那个渲染。

编辑：这不是重复问题。

• 我不想知道为什么它不起作用。我需要解决方案。
• 我的输出结果不同。其他问题的输出结果甚至都不是多列的。

- bh_earth0

---

首先要注意的是，space-around 没有被应用。根据您代码中的顺序，它被 space-evenly 覆盖了。 - Michael Benjamin

第二个需要注意的是，问题甚至不在于 space-around / space-evenly。它与 align-content 有关，该属性仅适用于多行弹性容器（即，在单行弹性容器中被忽略）。 - Michael Benjamin

然而，正如您所注意到的那样，不同的浏览器对规范语言有不同的解释。这种行为在这两个副本中得到了解释。 - Michael Benjamin

好的，我明白了。但这并没有解决问题。我必须让它工作起来。无论是解释/还是他们懒得解释。我现在暂时想出了一个解决方法。不管怎样，还是谢谢。 - bh_earth0

Answer 1

编辑2：我通过使用js getboundrect比较每个项目的最大宽度，然后在换行时应用margin来解决了这个问题。但是很混乱，不想使用它。但我不得不使用。

我清理了代码，使其适用于所有flex-container和flex-item，如果您在doit()函数中提供适当的CssSelector，它将起作用。但这只适用于列。

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

    };

- bh_earth0