使元素平均填充给定空间

Question

我想有div元素的布局，如下所示：

如果屏幕足够大，则单行中有许多块。

例如，我希望每个块的最小宽度设置为250px。

因此，在大屏幕上，我可以为这些元素提供以下内容。右边是地图（可关闭），如果用户隐藏它，那么行中将有6个块。

接下来，当我水平收缩浏览器窗口时，所有块都不适合行，因此它们移动到下一行。好的，现在这样他们去做第二行，但是他们在div块和地图之间留出空间。如下图所示。

我想有这样的布局，如果4个块不适合空间那么确定有3个块，但它们同样填充剩余空间（没有这个剩余的黄色空间）。见下图。

然后，当浏览器窗口缩小更多时，它应该如下所示

在移动设备和非常狭窄的浏览器窗口上：

好吧，我可以使用这样的CSS样式实现这样的事情：

#parent {
    display: flex;
    flex-wrap: wrap;
}

.child {
    width: calc(33% - 15px);
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;  
    min-width: 250px;
}

然后我应该使用媒体查询手动更改它：

calc(25% - 15px) //lg
calc(33% - 15px) //md
calc(50% - 15px) //sm
calc(100% - 15px) //xs 

当地图消失时，甚至可能是这个

calc(16.667% - 15px) //lg+no map

Ok FLEX不是那么向后兼容所以我可以玩更多，并做这样的事情：

#parent {

}

.child {
    width: calc(33% - 15px);
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;  
    min-width: 250px;
    float: left; 
}

然后根据屏幕大小手动更改此宽度并添加清除：在最后一个元素使用后左侧

.block-offer:nth-last-child(1):after { 
    clear: left; 
}

或者在其他元素之前做一些其他的clearfix

甚至（它是必要的吗？）添加清除：在每行之后使用：

.block-offer:nth-child(4n+1) { 
   clear:left; 
}
.block-offer:nth-child(3n+1) { 
   clear:left; 
}
.block-offer:nth-child(2n+1) { 
   clear:left; 
}
.block-offer:nth-child(1n+1) { 
   clear:left; 
}

喜欢这个宽度：calc（）取决于屏幕大小和div的宽度

但后来我需要使用许多媒体查询，我想将这个CSS包装在一些有角度的2+组件中，只有这样的东西：

<blocks-container max-cols="6"> 
    <block min-width="250px"></block> 
    <block min-width="250px"></block>
     ...
</blocks-container>

我认为使用@media查询会改善这种行为，但我的组件将与屏幕尺寸紧密结合，我认为没有像我希望的那样通用灵活地指定max-cols和min-widths。

Answer 1

这是一个可能的解决方案，它结合了CSS flexbox和grid：

body {
  display: flex;                 /* 1 */
}
article {                        /* 2 */
  flex: 1;                       /* 2 */                   
  margin-right: 10px;
  display: grid;                 /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* 4 */
  grid-auto-rows: 100px;         /* 5 */
  grid-gap: 10px;                /* 6 */
}
map {
  min-height: 200px;            /* 7 */
  width: 250px;
  background-color: orangered;
}
@media (max-width: 800px) {     /* 8 */
  map { display: none; }
}
section {                       
  background-color: lightblue;
  border: 2px solid gray;
}

<article>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</article>
<map></map>

jsFiddle

笔记：

1. 创建一个包含两个flex项的Flex容器。
2. 第一项（article）保存包裹块（section）。设置为flex: 1以消耗所有可用宽度。
3. 第一个项目是网格容器，因此网格属性可以应用于块。
4. 见下文。
5. grid-auto-rows属性设置自动生成的行的高度。
6. grid-gap属性是grid-column-gap和grid-row-gap的简写。此规则在网格项之间设置了10px的间隙。
7. 第二个弹性项目是地图（map），由于其兄弟姐妹的flex: 1而对齐。
8. 媒体查询删除地图，以模拟用户行为。

auto-fill函数允许网格尽可能多地排列网格轨道（列或行）而不会溢出容器。这可以创建类似于flex布局的flex-wrap: wrap的行为。

minmax()函数设置网格轨道的最小和最大尺寸范围。在上面的代码中，列轨道的宽度将至少为250px，并且最大可用空间（1fr）。这可以防止显示空白区域。

fr单位代表可用空间的一小部分。它类似于flex布局中的flex-grow。

浏览器支持CSS网格

• Chrome - 完全支持截至2017年3月8日（第57版）
• Firefox - 完全支持截至2017年3月6日（第52版）
• Safari - 完全支持截至2017年3月26日（版本10.1）
• Edge - 完全支持截至2017年10月16日（版本16）
• IE11 - 不支持当前规范;支持过时的版本

这是完整的图片：http://caniuse.com/#search=grid

Answer 2

您可以将此作为示例，您可以使用flex或使用media query来更改style，以便在不同的break points中更改https://jsfiddle.net/sjf5ms08/，如下所示，这可以更好地了解所做的更改。

检查这个jsFiddle -

#box{
  width:100%;
  height:auto;
}
#box > .b1, .b2, .b3, .b4, .b5, .b6{
  width:33%;
  height:150px;
  background:red;
  display:inline-block;
}
@media screen and (max-width: 1280px){
#box > .b1, .b2, .b3, .b4, .b5, .b6{
  width:250px;
  height:150px;
  margin-bottom:10px;
  background:blue;
  }  
}
@media screen and (max-width: 940px){
#box > .b1, .b2, .b3, .b4, .b5, .b6{
  width:33%;
  margin-bottom:10px;
  background:yellow;
  }  
}
@media screen and (max-width: 760px){
#box > .b1, .b2, .b3, .b4, .b5, .b6{
  width:49%;
  margin-bottom:10px;
  background:green;
  }  
}

<div id="box">
  <div class="b1">1</div>
  <div class="b2">2</div>
  <div class="b3">3</div>
  <div class="b4">4</div>
  <div class="b5">5</div>
  <div class="b6">6</div>
</div>

FIDDLE

Answer 3

如果你想使用float方法，你应该这样做：

<div class="col">
   <div class="content">
       <p>Content</p>
   </div>
</div>

HTML：

/* complete with your style */
.col { display:block; width:25%; border-sizing:border:box; float:left; padding:10px; }

@media (max-width: 1280px) { 

.col { width:33%; }

}

@media (max-width: 1024px) { 

.col { width:50%; }

}

@media (max-width: 768px) { 

.col { width:100%; }

}

CSS：

flex-wrap:wrap;

如果你想使用flex方法，请按行排序html，然后使用width:250px和min-width:250px: width:25%或flex，并使用上面的媒体查询

Answer 4

您可以尝试在卡上应用

body {
  margin: 0;
}

.parent {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.child:nth-child(2n+1) {
  background: rgb(0, 0, 255);
}

.child:nth-child(2n+2) {
  background: rgb(255, 255, 255);
}

.child:nth-child(2n+3) {
  background: rgb(244, 241, 194);
}

.child {
  margin: 10px 10px 20px 0;
  min-width: 250px;
  height: 300px;
  background: green;
  box-sizing: border-box;
  border: 1px solid black;
  flex: 1 1 250px;
}

（flex-grow / flex-shrink / flex-basis）

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

https://jsfiddle.net/0jc93hqn/

小提琴：qazxswpoi