即使分发固定大小的div

我经历了几个类似的问题，但答案不适合我。即使分发固定大小的div

我有几个div，它们每个都有210px的固定宽度。

它们所在的容器可以根据用户的屏幕大小调整大小。 div必须始终保持均匀的水平间距，如果没有空间，它也应该将div的行分成另一行。

要了解更多信息，请参阅下图。

这个JS fiddle已经达到了我想要的结果。但是我不明白它对于我必须具有固定宽度的div是如何工作的。

width: calc(100%/6);

编辑：

与JS小提琴的问题是，当屏幕尺寸是它有空间，但没有足够的空间，以适应另一个DIV。在这种情况下，最后一个div应该更接近右侧。

来源

2016-04-26 user3607282

Flexbox来拯救。 –

为什么选择Flexbox？内嵌块，静态宽度，百分比装订线。 –

@MarcoHengstenberg啊..百分比排水沟！ –

Flexbox可以通过将justify-content设置为space-around（或space-between，取决于您的表示需要）来执行您想要的操作。这里有一个简单的例子：

body{ 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    justify-content:space-around; 
 
    margin:0; 
 
    padding:5px; 
 
} 
 
div{ 
 
    background:#000; 
 
    flex:0 0 210px; 
 
    height:210px; 
 
    margin:5px; 
 
    width:210px; 
 
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

检查caniuse.com对浏览器的支持和前缀细节。

来源

2016-04-26 13:06:52 Shaggy

一般正确取决于OP想要最后一行上的框出现。 –

该死的，我真的需要花时间舒适地使用弹性盒子。看起来好像会节省为这种常见设计模式编写大量额外的代码。 – Korgrue

这是一个关于flexbox及其属性的非常好的初学者教程：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Shaggy

http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

因此，这里是一篇文章，解释如何实现可视化的布局，而无需使用Flexbox的（它附带了很多的bug，你将不得不在深潜水，使其跨浏览器工作始终如一 - 浏览器支持变得更糟，当你不修补它的语法时，让我们假设：“没有Flexbox！”）。

在手，你的问题的解决方案是相当直截了当，而不Flexbox的：

.container { 
    padding: y%; /* by giving the container a percentage based padding, you will create a slowly upscaling container as screen-width increases */ 
} 

.box { 
    width: 210px; /* whyever they need a fixed width but ok, who knows */ 
    margin-right: x%; /* x should be replaced with a value that distributes your containers evenly across the screen and makes them wrap when needed. Fiddle with the value until it makes sense to you. */ 
}

这是否解决了问题？

来源

2016-04-26 12:55:27

如果我指的是屏幕截图，每个人的想法，Flexbox，就在这里帮助你

#container { 
 
    margin:1em; 
 
    color:turquoise; 
 
    display:flex; 
 
    flex-wrap:wrap; 
 
    border: solid; 
 
    padding:2vh; 
 
    align-items:center; 
 
    justify-content:space-between; 
 
} 
 
#container > div:before { 
 
    content:'boxe '; 
 
    padding-right:0.25em;; 
 
} 
 
#container > div { 
 
    display:flex; 
 
    
 
    align-items:center; 
 
    justify-content:center; 
 
    min-height:25vh; 
 
    border: solid; 
 
    margin:1vh 0; 
 
    width:400px; 
 
    min-width:calc(100vw/4); 
 
    max-width: 45%; 
 
    
 
}

<div id="container"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
</div>

codepen to play with

（我期待从我的意见其实关于 http://jsfiddle.net/bvgn46hu/108/ & http://jsfiddle.net/bvgn46hu/114/反馈）

来源

2016-04-26 13:55:58

即使分发固定大小的div

回答

相关问题