跨度为网格中2行的flex元素

时间：2017-06-05 09:45:34

标签： html css flexbox

我正在处理网格布局，我需要它可以动态自定义。例如，从这个4 x 2网格开始：

＆＃13;
＆＃13; 
html, body {
    background: #f2f2f2;
    padding: 0;
    margin: 0;
    height: 100%;
}

* {
  box-sizing: border-box;
}

.grid-container {
    background: #f2f2f2;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 0;
    bottom: 0px;
    width: 100%;
}

.grid-cell {
    flex: 1;
    flex-wrap: wrap;
    margin: 0 -1px -1px 0;
    padding: 10px;
}

.panel-wes {
    background: #ffffff;
    width: 100%;
    height: 100%;
    border-top: 3px solid #e7eaec;
    border-bottom: 3px solid #e7eaec;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid-container">
  <div class="grid-cell" x="0" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="0" y="0"</div>
  </div>
  <div class="grid-cell" x="1" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="1" y="0"</div>
  </div>
  <div class="grid-cell" x="2" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="2" y="0"</div>
  </div>
  <div class="grid-cell" x="3" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="3" y="0"</div>
  </div>
  <div class="grid-cell" x="0" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="0" y="1"</div>
  </div>
  <div class="grid-cell" x="1" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px);">
    <div class="panel-wes">x="1" y="1"</div>
  </div>
  <div class="grid-cell" x="2" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="2" y="1"</div>
  </div>
  <div class="grid-cell" x="3" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="3" y="1"</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我可以通过这种方式让我的一个瓷砖跨越多个列：

＆＃13;
＆＃13; 
html, body {
    background: #f2f2f2;
    padding: 0;
    margin: 0;
    height: 100%;
}

* {
  box-sizing: border-box;
}

.grid-container {
    background: #f2f2f2;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 0;
    bottom: 0px;
    width: 100%;
}

.grid-cell {
    flex: 1;
    flex-wrap: wrap;
    margin: 0 -1px -1px 0;
    padding: 10px;
}

.panel-wes {
    background: #ffffff;
    width: 100%;
    height: 100%;
    border-top: 3px solid #e7eaec;
    border-bottom: 3px solid #e7eaec;
}
＆＃13; 
<div class="grid-container">
  <div class="grid-cell" x="0" y="0" style="min-width: calc(50% + 1px); max-width: calc(50% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="0" y="0"</div>
  </div>
  <!--div class="grid-cell" x="1" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="1" y="0"</div>
  </div-->
  <div class="grid-cell" x="2" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="2" y="0"</div>
  </div>
  <div class="grid-cell" x="3" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="3" y="0"</div>
  </div>
  <div class="grid-cell" x="0" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="0" y="1"</div>
  </div>
  <div class="grid-cell" x="1" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px);">
    <div class="panel-wes">x="1" y="1"</div>
  </div>
  <div class="grid-cell" x="2" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="2" y="1"</div>
  </div>
  <div class="grid-cell" x="3" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="3" y="1"</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

但是我无法找到跨越多行的磁贴的方法，因为这是我尝试时会发生的事情：

＆＃13;
＆＃13; 
html, body {
    background: #f2f2f2;
    padding: 0;
    margin: 0;
    height: 100%;
}

* {
  box-sizing: border-box;
}

.grid-container {
    background: #f2f2f2;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    top: 0;
    bottom: 0px;
    width: 100%;
}

.grid-cell {
    flex: 1;
    flex-wrap: wrap;
    margin: 0 -1px -1px 0;
    padding: 10px;
}

.panel-wes {
    background: #ffffff;
    width: 100%;
    height: 100%;
    border-top: 3px solid #e7eaec;
    border-bottom: 3px solid #e7eaec;
}
＆＃13; 
<div class="grid-container">
  <div class="grid-cell" x="0" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(100% + 1px); max-height: calc(100% + 1px);">
    <div class="panel-wes">x="0" y="0"</div>
  </div>
  <div class="grid-cell" x="1" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="1" y="0"</div>
  </div>
  <div class="grid-cell" x="2" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="2" y="0"</div>
  </div>
  <div class="grid-cell" x="3" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="3" y="0"</div>
  </div>
  <!--div class="grid-cell" x="0" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="0" y="1"</div>
  </div-->
  <div class="grid-cell" x="1" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px);">
    <div class="panel-wes">x="1" y="1"</div>
  </div>
  <div class="grid-cell" x="2" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="2" y="1"</div>
  </div>
  <div class="grid-cell" x="3" y="1" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
    <div class="panel-wes">x="3" y="1"</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

我找到一篇文章谈论这个，并建议创建一个＆＃34;列＆＃34; div然后我将无法实现水平跨越。这个问题有没有已知的解决方案？

1 个答案:

答案 0 :(得分：2)

使用您当前的网格系统，您需要执行以下操作：添加第二列作为100％高度的兄弟，然后将剩余的框放在第二列中。

在下面的代码中，我添加了包装器单元格并将display:flex添加到该单元格中。然后我将该包装内的单元格宽度更改为33％。

我还从包装器网格单元中删除了填充（因为你的负边距，它实际上需要1px填充来删除填充）

最后，我添加了一个水平跨度单元格，只是为了向您展示它是否同时

html,
body {
  background: #f2f2f2;
  padding: 0;
  margin: 0;
  height: 100%;
}

* {
  box-sizing: border-box;
}

.grid-container {
  background: #f2f2f2;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 0;
  bottom: 0px;
  width: 100%;
}

.grid-cell {
  display: flex; /* add this */
  flex: 1;
  flex-wrap: wrap;
  margin: 0 -1px -1px 0;
  padding: 10px;
}

.panel-wes {
  background: #ffffff;
  width: 100%;
  height: 100%;
  border-top: 3px solid #e7eaec;
  border-bottom: 3px solid #e7eaec;
}

.no-padding {
  padding: 1px;
}

  
<div class="grid-container">
  <div class="grid-cell" x="0" y="0" style="min-width: calc(25% + 1px); max-width: calc(25% + 1px); min-height: calc(100% + 1px); max-height: calc(100% + 1px);">
    <div class="panel-wes">x="0" y="0"</div>
  </div>
  <div class="grid-cell no-padding">
    <div class="grid-cell" x="1" y="0" style="min-width: calc(33% + 1px); max-width: calc(33% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
      <div class="panel-wes">x="1" y="0"</div>
    </div>
    <div class="grid-cell" x="2" y="0" style="min-width: calc(33% + 1px); max-width: calc(33% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
      <div class="panel-wes">x="2" y="0"</div>
    </div>
    <div class="grid-cell" x="3" y="0" style="min-width: calc(33% + 1px); max-width: calc(33% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
      <div class="panel-wes">x="3" y="0"</div>
    </div>
    <div class="grid-cell" x="1" y="1" style="min-width: calc(33% + 1px); max-width: calc(33% + 1px); min-height: calc(50% + 1px); max-height: calc(50% + 1px);">
      <div class="panel-wes">x="1" y="1"</div>
    </div>
    <div class="grid-cell" x="2" y="1" style="min-width: calc(66% + 1px); max-width: calc(33% + 1px);">
      <div class="panel-wes">x="2" y="1"</div>
    </div>
  </div>
</div>

相关问题
最新问题