Flexbox,浮动或显示表

Question

更新请注意kukkuz的答案是一个不错的黑客,但如果第一个框变得更多内容,它不是100%工作看到这个小提琴然后中心框开始向右移动

我需要的是这样的:

哪里:

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%肯定它不能用于漂浮.我怎样才能达到预期的效果？

在评论中更新问题

问:假设第一个盒子的内容很大,第二个盒子会与第一个盒子重叠,如果它位于中心......你怎么看待它？

答:可能有溢出隐藏和z-index.它将是图库下方的工具栏.左框将描述图像的某些内容,中间框是图库导航,右框将显示一些"帮助"文本.所以画廊导航是最重要的,必须始终可见(和居中)

Answer 1

我当然想念,justify-self但你可以试试黑客:添加margin-right: auto到第一个和第三个flex-item- 见下面的演示:

.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>

Answer 2

我认为这将是一个解决方案。但我需要一个用于侧面元素的辅助包装。

您不能在侧面容器上设置最小宽度（任意）。我将其设置为 10px，只是为了给出这个想法。

.flex-container {
  display: flex;
  overflow: hidden;
}
.side {
  flex: 10px 1 0;
  background-color: powderblue;
}
.center {
  flex: auto 0 0;
  background: tomato;
}
.side div {
  background: tomato;
  display: inline-block;
}
.flex-item {
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
}

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