html - Flexbox、 float 或显示表格

Question

Update Please note kukkuz's answer is a nice hack but it is NOT working 100% if the first box becomes more content see this fiddle then the center box starts moving to the right

我需要的是这样的:

地点:

1. 第一个框 “Lorem ipsumd dolor sit amet” 始终保持在原位

2. 第二个框“center content”必须始终居中

3. 第三个框 “float left after center” 必须紧跟在中心框之后

4. 所有这些框都将具有可变的内容长度，因此它可以比图片中显示的内容更少或更多。 对于这 3 个番茄色盒子中的每一个

这是我的

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  background-color: powderblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
}

<div class="flex-container">
  <div class="flex-item">Lorem ipsumd dolor sit amet</div>
  <div class="flex-item">center content</div>
  <div class="flex-item">float left after center</div>
</div>

现在不确定如何达到预期的结果。 flex-box 是正确的方法还是我应该使用 display-table？我 97% 确定它不适用于 float 。我怎样才能达到预期的结果？

Update from question in comments

Q: suppose the first box has large content such that the second box will overlap the first, if it is at the center... how do you look tohandle that?

A: probably with overflow hidden and z-index. It will be a toolbar underneath a gallery. Left box will describe something of the image,middle box is the gallery navigation, and the right box will displaysome "helper" text. so the gallery navigation is the most importantwhich must always be visible (and centered)

Answer 1

我当然想念 justify-self 但你可以尝试 hack:将 margin-right: auto 添加到第一个和第三个 flex-items - 请参阅下面的演示:

.flex-container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
  background-color: powderblue;
}

.flex-item {
  background: tomato;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
}

.auto {
  margin-right: auto;
}

<div class="flex-container">
  <div class="flex-item auto">Lorem ipsumd dolor sit amet</div>
  <div class="flex-item">center content</div>
  <div class="flex-item auto">float left after center</div>
</div>