带有 5 个盒子的 flexbox

Question

我正在尝试使用 flexbox 实现以下布局

我已经在网格中尝试过它按预期工作。但它在 IE 中不起作用。所以我想切换到 flexbox 所以下面是我的 grid 和 flex 版本。

网格代码如下：

 //this is with grid css
.grid_container {
  width: 65%;
  margin: 10px auto;
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 1100px;
  display: -ms-grid;
  -ms-grid-columns: 1fr 1fr 1fr;             
  -ms-grid-row-gap:1.5rem;
  -ms-grid-column-gap:1.5rem;
}
//this is using grid css
.box-item {
  width: 100%;
  height: auto;
  position: relative;
  }
 
//inside image css
.box-item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
}

.box-text {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: white;
}

<div class="grid_container">
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
 <div class="box-item">
  <img src="https://dummyimage.com/350x275/000/fff" />
  <div class="box-text">
   dummy text
  </div>
 </div>
</div>

我正在尝试在 flexbox 中做同样的事情，但我无法实现：css 代码如下所示：

//the same class using flex property
.grid_container{
    margin: 10px auto;
    max-width: 1100px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
}

//this is with flex
.box-item {
  width: 33%;
  height: auto;
  max-width: 33%; 
  position: relative;
}

//inside image css
.box-item img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: bottom;
  min-height: 200px;
}

.box-text {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 400;
  color: white;
}

//trying to add responsiveness
@media only screen and (max-width: 780px) {
.box-item {
  width: 45%;
}
}

Answer 1

对于您的主容器：

.main-container {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

然后你的项目：

.item {
    flex-basis: 30%;
}