CSS：使Flexbox的正確內容僅溢出到右邊

我在單個容器div中有一個動態數量的div，其格式爲display: flex。CSS：使Flexbox的正確內容僅溢出到右邊

現在，我想讓我的孩子div居中，所以我用justify-content: center。這對少數兒童（藍色矩形）是完美的

但是對於大量的兒童，設置justify-content: center意味着孩子div被推得越來越遠離屏幕（紅色矩形）。

孩子被推到屏幕右側仍然可見，因爲我可以滾動到右側看最右邊的孩子。

但是，在屏幕左側推出的孩子不可見，因爲我無法滾動到左側。這是個問題。

所以基本上我想用flexbox到中心的孩子，但阻止孩子被推離屏幕的左側。相反，內容應該溢出到正確的方式，justify-content: flux-start工作，但仍然居中。

來源

2017-07-31 CryptoCat

你能發表一些代碼嗎？ – vals

我不想在自我宣傳風險的問題上拋出這個問題，但它是針對客戶端Trello克隆版的：http://reacto.surge.sh。在撰寫文章時，我將'justify-content'設置爲'flux-start'，並且我一直在嘗試將我的列中心設置爲:) – CryptoCat

只需使用嵌套柔性容器，並將內部柔性容器設置爲margin-left: auto和margin-right: auto。這將起作用，因爲只有當我們有可用空間分配時，汽車邊距才起作用。演示：

.flex { 
 
    display: flex; 
 
} 
 

 
.inner-flex { 
 
    display: flex; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
/* just styles for demo */ 
 
.flex__item { 
 
    background-color: tomato; 
 
    color: white; 
 
    margin: 10px; 
 
    padding: 10px; 
 
}

<div class="flex"> 
 
    <div class="inner-flex"> 
 
    <div class="flex__item">One</div> 
 
    <div class="flex__item">Two</div> 
 
    <div class="flex__item">Three</div> 
 
    <div class="flex__item">Four</div> 
 
    <div class="flex__item">Five</div> 
 
    <div class="flex__item">Six</div> 
 
    <div class="flex__item">Seven</div> 
 
    </div> 
 
</div>

這裏是jsFiddle測試調整。

來源

2017-07-31 16:05:54

CSS：使Flexbox的正確內容僅溢出到右邊

回答

相關問題