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：居中的一组对象属于该组内均匀分布

回答

相关问题