Question

更新请注意kukkuz's答案是一个不错的黑客，但如果第一个框变为更多内容，不能100％，请参阅this fiddle然后中心框开始向右移动

我需要的是这样的事情：

其中：

第一个框"Lorem ipsumd dolor sit amet"始终位于
第二个框"center content"始终居中
第三个方框"float left after center"必须位于中间框
所有这些框都具有可变的内容长度，因此它可以减少内容，然后在图片中显示或更多。 对于这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％肯定它不能用于漂浮。我怎样才能达到预期的效果？

在评论中更新问题

问：假设第一个框内容较大，第二个框与第一个框重叠，如果它位于中心...你怎么看？   处理那个？

A：可能有溢出隐藏和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，只是为了给出这个想法。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

不确定使用display-table是否可能是解决我问题的更好方法。所有不同的内容长度似乎都很好看。

不确定

max-width: 10px;

适用于.table-cell，但似乎可以胜任......

.display-table {
  display: table;
  height: 70px;
  background-color: powderblue;
  width: 100%;
  margin: 10px 0;
}

.table-row {
  display: table-row;
}

.table-cell {
  border: solid 1px black;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: tomato;
  max-width: 10px;
}

.table-cell:first-child,
.table-cell:last-child {
  text-align: left;
}

<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsumd dolor sit amet</div>
    <div class="table-cell">center content</div>
    <div class="table-cell">float left after center</div>
  </div>
</div>


<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsum dolor sit amet</div>
    <div class="table-cell">center content center content center content</div>
    <div class="table-cell">float left after center</div>
  </div>
</div>


<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
    <div class="table-cell">center content</div>
    <div class="table-cell">float left after center</div>
  </div>
</div>



<div class="display-table">
  <div class="table-row">
    <div class="table-cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat asperiores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet</div>
    <div class="table-cell">center</div>
    <div class="table-cell">float left after center float left after center periores aliquid rerum optio perferendis aut debitis delectus. Rerum, facilis pariatur debitis libero accusantium numquam expedita ratione aliquid quae temporibus excepturi! ipsumd dolor sit amet
    </div>
  </div>

Answer 4

我不认为只使用CSS就可以满足您的所有条件而无需添加包装div - 使用任何方法。

使用position:absolute和margin-left的组合可以非常接近，只是中间元素不会完全位于中心。

＆＃13;

.container {
  background-color: powderblue;
  margin: 40px;
  white-space: nowrap;
}
.item1, .item2, .item3 {
  background: tomato;
  padding: 5px;
  height: 100px;
  line-height: 100px;
  color: white;
  text-align: left;
  display: inline-block;
  position: relative;
  z-index: 1;
}
.item1 {
  position: absolute;
  background: green;
  z-index: 0;
}
.item2 {
  margin-left: 50%;
  //transform: translateX(-50%); /* will center, but then no way to pull item3 back */
  z-index:1;
}
.item3 {
  z-index:1;
}

＆＃13;

<div class="container">
  <div class="item1"> Lorem ipsumd dolor heth ehe h </div>
  <div class="item2">center content</div>
  <div class="item3">float left after center</div>
</div>

position the first item with a lower z-index - incase the first item is really long

<div class="container">
  <div class="item1"> Lorem ipsumd dolor sit amet fgfdg theth ehe h Lorem ipsumd dolor sit amet fgfdg theth ehe h </div>
  <div class="item2">center content</div>
  <div class="item3">float left after center</div>
</div>

＆＃13;

Answer 5

只需将其添加到您的CSS

即可

 .flex-item:nth-of-type(1),.flex-item:nth-of-type(3)
    {
      margin-right:auto;
    }

.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:nth-of-type(1),.flex-item:nth-of-type(3)
{
  margin-right:auto;
}
.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>

Flexbox，浮动或显示表

5 个答案: