CSS：居中的一組對象屬於該組內均勻分佈

我有一堆容器內的div，我想均勻水平分佈的：CSS：居中的一組對象屬於該組內均勻分佈

，但我也希望容器在頁面居中

現在的容器我的CSS（筆），代碼如下所示：

@media(min-width: 900px) { 
       display: flex; 
       width: 830px; 
       margin 0 auto; 
       justify-content: space-between; 
      }

這是導致我ñ一些奇怪的利潤和容器不在頁面居中。這是因爲我使用display:flex和'justify-content`字段的方式嗎？

來源

2017-09-25 fox

請您加入顯示奇怪邊距的工作示例？ – jfeferman

你的方法看起來不錯。在'margin'後面加一個冒號。 –

@jfeferman什麼是最好的方式來傳遞？像codepen這樣的東西可能無法最好地傳達我特意呈現的渲染問題。 – fox

如果要居中的.container，你可能會再次其父添加display: flex和使用align-items: center和justify-content: center到中心集裝箱，如下圖所示：

body { 
 
    display: flex; 
 
    height: 100vh; 
 
    justify-content: center; 
 
    align-items: center; 
 
    margin: 0; 
 
    padding: 0; 
 
    background: yellow; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    border: 1px solid; 
 
    width: 70%; 
 
    height: 20%; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
.child { 
 
    background: red; 
 
    border: 1px solid; 
 
    padding: 6px; 
 
    margin: 0 6px; 
 
}

<div class="container"> 
 
    <div class="child">1</div> 
 
    <div class="child">2</div> 
 
    <div class="child">3</div> 
 
    <div class="child">4</div> 
 
</div>

來源

2017-09-25 01:12:15 takeradi

看看下面的例子與一個450px容器。正如你所建議的那樣，使用justify-content:space-between可以正確提供div元素之間的間距。

.container { 
 
    display: flex; 
 
    width: 450px; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding: 2px; 
 
    border: 1px solid black; 
 
    justify-content:space-between; 
 
} 
 

 
.container div { 
 
    border: 1px solid red; 
 
    margin: 4px; 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>small</div> 
 
    <div>very large content</div> 
 
</div>

現在，假設你希望擴大各div爲佔用所有剩餘空間，也使均勻分佈在div元素。使用flex-grow:1上的孩子div元素使他們佔據剩餘的空間。添加width:calc(100%/3)以均勻調整它們的大小。

.container { 
 
    display: flex; 
 
    width: 450px; 
 
    height: 50px; 
 
    margin: 0 auto; 
 
    padding: 2px; 
 
    border: 1px solid black; 
 
    justify-content:space-between; 
 
} 
 

 
.container div { 
 
    border: 1px solid red; 
 
    margin: 4px; 
 
    flex-grow:1; 
 
    width:calc(100%/3); 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>small</div> 
 
    <div>very large content</div> 
 
</div>

最後，做一個媒體查詢內的工作，你需要調整你的CSS如下：

@media(min-width: 450px) { 
 
    .container { 
 
    display: flex; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
    justify-content: space-between; 
 
    } 
 
    .container div { 
 
    border: 1px solid red; 
 
    margin: 4px; 
 
    flex-grow: 1; 
 
    width: calc(100%/3); 
 
    } 
 
}

<div class="container"> 
 
    <div>1</div> 
 
    <div>small</div> 
 
    <div>very large content</div> 
 
</div>

來源

2017-09-25 01:34:24 jfeferman

CSS：居中的一組對象屬於該組內均勻分佈

回答

相關問題