Question

我有一个响应式设计，连续有3个项目。如果屏幕变小，则第一个将被删除。因此，3个项目与flexbox和justify-content:space-between一起分发，这使得外部项目绑定到两侧，中间项目居中。现在，如果第一个项目被删除，我想成为右侧的正确项目，左侧项目以左侧空间为中心。

这是我的3项代码：

<div style="display:flex;flex-flow:row;justify-content:space-between;align-items:center">
   <span style="width:70px;text-align:right">To the left</span> 
   <div style="height:40px;width:100px;background-color:red">Center</div>
   <span style="width:70px;text-align:right">To the right</span>    
</div>

这是两个项目：

<div style="display:flex;flex-flow:row;justify-content:space-between;align-items:center">
   <div style="height:40px;width:100px;background-color:red">Center</div>
   <span style="width:70px;text-align:right">To the right</span>    
</div>

我为你准备了一些小提琴：https://jsfiddle.net/msLd7g5j/1/

编辑：注意这不是重复，至少不是你指出的那个，因为我希望左项居中于'剩余'并且不是绝对居中的空间。

解决方案：我有了一个新的小提琴：https://jsfiddle.net/msLd7g5j/2/

我只是不删除第三个元素，而是删除内容，因此Element看起来像

`<span> </span>`

flexbox只是将它作为工作，并将中间元素置于相对中间位置，并设置justify-content:space-between。

Answer 1

所以你想要：

...右侧的右侧项目和左侧的项目居中   剩下的空间。

...左边的项目以“剩下的空间”为中心。并不是   绝对居中。

您的解决方案（贴在答案底部）看起来非常不错。您从第一个弹性项目中删除所有内容，并将其归零width。使用justify-content: space-between，这会将第二个弹性项目置于容器的左边缘和下一个元素的左边缘之间。这似乎完美无缺。

另一种方法是删除第一个弹性项目（display: none）。将中间flex项的内容包装在span中。将所有内联样式从父级移动到子级。然后将width: 100%; text-align: center;应用于父级。

<div style="display:flex; flex-flow:row; justify-content:space-between;align-items:center">
    <span style="text-align:right; display: none;"> </span> 
    <div style="width: 100%; text-align: center;"><span style="display: inline-block;
                    width:100px; background-color:blue; height: 40px;">Center</span></div>
    <span style="width:70px;text-align:right">To the right</span>   
 </div>

DEMO：https://jsfiddle.net/msLd7g5j/4/

在弹性容器的剩余空间（非全宽）中水平居中弹性项目

1 个答案: