相关疑难解决方法(0)

定位最后一行的弹性项目

我的问题是我希望flexbox具有可变范围宽度,并且一切正常,但不是最后一行.我希望所有孩子都有相同的维度,即使行没有孩子(最后一行).

#products-list {
    position:relative;
    display: flex;
    flex-flow: row wrap;
    width:100%;
}

#products-list .product {
    min-width:150px;
    max-width:250px;
    margin:10px 10px 20px 10px;
    flex:1;
}

Run Code Online (Sandbox Code Playgroud)

在JSFiddle示例中,我创建了一个动态情境.

我的flex div可以缩小到150px并且长到250px,但所有都必须具有相同的大小(显然我想要一个CSS解决方案,JS我知道的方式).

html css css3 flexbox

Bar*_*aro

2019 05-03

36
推荐指数

2
解决办法

1万
查看次数

在整个行/列中对齐网格项(如弹性项可以)

使用弹性容器和flex-wrap: wrap设置,您可以使用溢出的项目与中心对齐justify-content: center.

有没有办法使用CSS网格实现相同的行为溢出网格项？

我创建了一支显示所需弹性行为的笔

.container-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.container-flex .item {
  width: 33.33%;
  background: green;
  border: 1px solid;
}

.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.container-grid .item {
  background: red;
  border: 1px solid;
}

* {
  box-sizing: border-box;
}

Run Code Online (Sandbox Code Playgroud)

<h3>Flex</h3>
<div class="container-flex">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

<h3>Grid</h3>
<div class="container-grid">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div> …

Run Code Online (Sandbox Code Playgroud)

css css3 flexbox css-grid

Has*_*ect

2018 05-17

3
推荐指数

1
解决办法

1020
查看次数