首页 文章

使用固定宽度单元格设置网格样式

提问于
浏览 次
2

我有7个固定宽度（256px）和 margin: 20px 的组件，我希望它们在网格中对齐，但是我已经尝试了一些东西但是我已经卡住了 .

我尝试用弹性盒做这个，虽然完全有可能我错过了一些可以让它工作的弹性盒子，我没有运气 . 我得到的最接近的是：

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.grid div {
   margin: 20px;
   width: 256px;
   height: 48px;
}

.grid div:last-child {
  margin-left: auto
}

但是，如果最后一行的组件数量少于其他行，那么，如果最后一行的组件数量少于其他行，则对齐内容，同时使组件以页面为中心，将这些组件集中在一起并破坏网格效应 .

我也试过这个没有弹性盒子，只是：

.grid div {
   margin: 20px;
   width: 256px;
   height: 48px;
   float: left;
}

.grid div:last-child {
  float: right;
}

这非常接近我只需要一种方法将网格的宽度设置为256px的倍数（因为边距为296px），然后将网格置于父级中心 . 完全可以使用媒体查询，但我觉得应该有一个更简单的解决方案 .

（图片以防万一我不解释）

我正在寻找的行为：http://imgur.com/a/OacSW

行为不对：http://imgur.com/a/VLttI

HTML供参考：

<div class="grid">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>
html css html5 css3 flexbox

2 回答

  • 1

    通过几个媒体查询，你应该可以做到这一点，你可以使用伪元素作为ghost元素，并填补最后一个和最后一个项目之间的差距 .

    在这里我也给了网格一个最大宽度，所以连续不能有5个，我这样做是因为如果你需要那个，你需要一个额外的元素作为第二个作为鬼的因为它会拿3个鬼元素（2伪1）来解决这个问题 .

    如果你需要连续5个，一个只需要在其中一个伪元素上加倍，256px 256px 40px（边距为40px），连续6个，宽度为3倍等 .

    html, body {
  margin: 0;
}
.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.grid div {
   margin: 20px;
   width: 256px;
   height: 48px;
   background: lightgray;
}
  .grid div:last-of-type {
    order: 2
  }

@media screen and (min-width: 592px) {
  .grid::after {
    content: '';
    margin: 20px;
    width: 256px;
    height: 0;
    order: 1;
  }
}

@media screen and (min-width: 888px) {
  .grid::before {
    content: '';
    margin: 20px;
    width: 256px;
    height: 0;
    order: 1;
  }
}

@media screen and (min-width: 1184px) {
  .grid::before {
    display: none;
  }
}

@media screen and (min-width: 1480px) {
  .grid::before {
    display: inline;
    width: 552px;
  }
}

    <div class="grid">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>
    回复于
  • 1

    作为我多么顽固的证明，这是我的解决方案 .

    诀窍是有一些可被2..3..4..5整除的元素，所以根据需要添加额外的元素 .

    当然，这是如此丑陋，我选择隐藏源代码:-(

    .grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  border: solid 1px red;
}

.grid div {
  margin: 20px;
  width: 256px;
  height: 48px;
  background-color: tomato;
}

.grid div:last-of-type {
  background-color: fuchsia;
  order: 3;
  margin-top: -68px;
}

.grid span {
  margin: 0px 20px;
  width: 256px;
  height: 0px;
  order: 2;
}

.grid span:first-of-type {
  margin-top: 40px;
  height: 48px;
}

    <div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
    回复于

相关问题