Question

我正在尝试使用flexbox将两个public class ProtobufMessageConverter<T extends AbstractMessage > extends AbstractMessageConverter { private Parser<T> parser; public ProtobufMessageConverter(Parser<T> parser) { super(new MimeType("application", "protobuf")); this.parser = parser; } @Override protected boolean supports(Class<?> clazz) { if (clazz != null) { return EquipmentProto.Equipment.class.isAssignableFrom(clazz); } return true; } @Override public Object convertFromInternal(Message<?> message, Class<?> targetClass, Object conversionHint) { if (!(message.getPayload() instanceof byte[])) { return null; } try { // return EquipmentProto.Equipment.parseFrom((byte[]) message.getPayload()); return parser.parseFrom((byte[]) message.getPayload()); } catch (Exception e) { this.logger.error(e.getMessage(), e); } return null; } @Override protected Object convertToInternal(Object payload, MessageHeaders headers, Object conversionHint) { return ((AbstractMessage) payload).toByteArray(); } }的内容居中。我看了下面的帖子： scrolling flex container does not fit centered items

<div> s的内容是一个固定宽度的表，我将flex-grow设置为none。问题是在对齐时也会考虑第二个div的滚动条占用的空间。

这是一个简单的例子： http://jsfiddle.net/boc39Lsa/2/

<div>

#container {
    background-color: green;
    display: flex;
    /*overflow: auto;*/
}
.item {
    background-color: white;
    border: 1px solid black;
    flex-grow: 0;
}


.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right:auto;
}

.bigContent{
  height: 1000px;
}

.scroll{
  overflow: auto;
  height: 300px;
}

Answer 1

由于滚动条会增加元素的宽度，并且由于浏览器之间滚动条的宽度不同，因此没有直接属性可用于避免此行为。

我想到的最简单的解决方案是使用500px的初始itemslabelArr = document.querySelectorAll("#items .item label") for (var i = 0, len = itemslabelArr.length; i < len; i++) { console.log(itemslabelArr[i].innerHTML); }并将flex-basis设置为100％

Stack snippet

＆＃13;

table

＆＃13;

#container {
    background-color: green;
    display: flex;
}
.item {
    background-color: white;
    border: 1px solid black;
    flex-basis: 500px;
}

.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right:auto;
}

.bigContent{
  height: 1000px;
}

.scroll{
  overflow-y: auto;
  overflow-x: hidden;
  height: 300px;
}

＆＃13;

Answer 2

要使内容位于中心，您只需将容器内的对齐设置为居中，例如

text-align: center;

＆＃13;

#container {
    background-color: green;
    display: flex;
    text-align: center;
    /*overflow: auto;*/
}
.item {
    background-color: white;
    border: 1px solid black;
    flex-grow: 0;
}


.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right:auto;
}

.bigContent{
  height: 1000px;
}

.scroll{
  overflow: auto;
  height: 300px;
}

＆＃13;

<div id="container">
    <div class="item">
      <table width="500px">
        <tr><td>Header</td></tr>
      </table>
    </div>
</div>
<div id="container">
    <div class="item scroll">
      <div class="bigContent">
         <table width="500px">
            <tr><td>Some content</td></tr>
         </table>
      </div>      
    </div>
</div>

＆＃13;

滚动条宽度会导致居中

2 个答案: