Css flex - 右侧一个项目，另一个项目位于左侧空间

我是新来的CSS和更新的flex。我找不到答案，于是我开始了新的.. 我有以下的容器和项目：Css flex - 右侧一个项目，另一个项目位于左侧空间

.container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    } 

    .item { 
    color: rgb(51, 51, 51); 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    }

这样，我得到双方2项（一个左一个右）。我想知道如何做到以下几点：

左边的项目，就像以前一样在左边。从它结束的地方，到容器结束的地步 - 我以正确的元素为中心。
左边的项目将会像以前一样在左边。正确的项目将离容器右端10px。

谢谢！

来源

2017-05-25 OferP

你能否提供一些HTML，也许你想达到什么照片？这将帮助我们确定问题所在。 –

寻求帮助的问题（“**为什么不是，或者如何使这个代码工作？”）必须包括所需的行为，特定的问题或错误以及必要的最短代码来重现问题**本身**。没有**明确问题陈述**的问题对其他读者没有用处。请参阅：[如何创建一个最小，完整和可验证的示例]（http：// stackoverflow。COM /帮助/ MCVE）。 – LGSon

此问题的解决方案是使用嵌套柔性盒。在.item摆脱display: block; - 你不能混合使用flex和block显示规则。

你想要做的是设置一系列容器什么：

一个顶层柔性容器内的顶级容器的

标记

两个同样大小的Flex容器会看起来像这样：

<main class="container"> 
    <section class="left-container"> 
    <div class="item"></div> 
    </section> 
    <section class="right-container"> 
    <div class="item"></div> 
    </section> 
</main>

在CSS层，你给顶级的列弗el .container flex，然后justify-content: space-between将容器推向两侧。

.container { 
    display: flex; 
    justify-content: space-between; 
}

在两个嵌套的容器，你需要让他们既display: flex;为好。现在你可以像你想要的那样控制你的.item元素的位置。 align-items: center控制垂直轴，因此.left-container仅获得该定位，而右侧容器获得justify-content: center;以控制垂直对齐。

.left-container { 
    background-color: darkgray; 
    display: flex; 
    align-items: center; 
    height: 200px; 
    width: 50%; 
} 

.right-container { 
    background-color: lightgray; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 200px; 
    width: 50%; 
}

样式上的项目是非常简单的 - 我只是给高度和宽度的演示目的。他们没有必要。如果你想做精确的调整，请使用margin.item稍微推动这些标准。

.item { 
    background-color: red; 
    height: 100px; 
    width: 100px; 
}

Codepen： https://codepen.io/staypuftman/pen/PmLyNM

来源

2017-05-25 15:36:03 staypuftman

感谢您的详细解答！真的很有帮助。 – OferP

谢谢 - 很高兴它帮助。如果答案解决了您的问题，请务必将其标记为已接受的答案，以便其他人可以遵循该解决方案。 – staypuftman

Css flex - 右侧一个项目，另一个项目位于左侧空间

回答

相关问题