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 - 右側一個項目，另一個項目位於左側空間

回答

相關問題