2

我希望 div 元素的布局如下所示：

如果屏幕足够大，那么单行中有很多块。

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

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

大屏幕

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

在 div 和地图侧边栏之间留出空间

我想有这样的布局，如果 4 个块不适合空间，那么可以有 3 个块，但它们同样填充剩余空间（没有剩余的黄色空间）。请参阅下面的图片。

每行 3 个 div 块

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

每行 2 个 div 块

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

每行 1 个 div 块

好的，我可以使用这样的 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; 
}

然后还根据屏幕尺寸手动更改此宽度并添加clear: left after last element using

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

或在其他元素进行其他清除修复之前

甚至（是必要的吗？）添加 clear: left 在每一行之后使用：

.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() 取决于屏幕大小和 divs witdh

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

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

我认为使用@media 查询会稍微改善这种行为，但我的组件将与屏幕大小紧密结合，我认为没有像我希望的那样通用，可以灵活地指定最大列和最小宽度。

4

4 回答 4

2

这是一种可能的解决方案，它结合了 CSS flexbox 和网格：

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. 创建一个包含两个弹性项目的弹性容器。
  2. 第一项 ( article) 包含包装块 ( section)。它设置为flex: 1消耗所有可用宽度。
  3. 第一项被制成网格容器，因此可以将网格属性应用于块。
  4. 见下文。
  5. 该grid-auto-rows属性设置自动生成的行的高度。
  6. 该grid-gap属性是grid-column-gap和的简写grid-row-gap。此规则在网格项目之间设置了 10 像素的间隙。
  7. 第二个弹性项目是地图（map），由于flex: 1它的兄弟而右对齐。
  8. 媒体查询移除地图，以模拟用户行为。

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

该minmax()函数设置网格轨道的最小和最大尺寸范围。在上面的代码中，列轨道的宽度最小为 250 像素，最大为可用空间 ( 1fr)。这可以防止显示空白。

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

浏览器对 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

于 2017-05-07T19:41:09.787 回答
0

您可以将此作为示例，您可以使用flex或使用media query来更改style不同的元素，break points如下所示，这可以更好地理解所做的更改。

检查这个 jsFiddle - https://jsfiddle.net/sjf5ms08/

#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>

于 2017-05-07T15:41:30.427 回答
0

您可以尝试flex在卡片上申请（flex-grow/ flex-shrink/ flex-basis）

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;
}
<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/

于 2017-05-07T17:36:49.517 回答
0

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

小提琴

HTML：

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

CSS：

/* 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%; }

}

如果您想使用 flex 方法，请按行对 html 进行排序，然后使用flex-wrap:wrap;and width:250pxor min-width:250px: width:25%，并使用上述媒体查询

于 2017-05-07T15:37:25.700 回答