Question

我有以下HTML和CSS代码，也可以在JS fiddle here中找到。

body {
  margin: 0;
}

main {
  width: 80%;
  margin-left: 10%;
  float: left;

  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  background-color: Chartreuse;
}

.image {
  width: 80%;
  height: 100px;
  margin-left: 10%;

  background-color: green;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
}

.image img {
  width: 100%;
  height: 100%;
}



.flex-container {
 display: flex;
 flex-wrap: wrap;

 width: 80%;
 margin-left: 10%;

 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: red;
}


.flex-item{
 flex-basis: 25%;
 
 flex-grow: 1;
 flex-shrink: 1;

 padding-left: 5%;
 padding-right: 5%;

 box-sizing: border-box;
 border-style: solid;
 border-width: 1px;
 background-color: blue;
}

<body>

  <main>
  
  <div class="image">
  <img src="http://placehold.it/101x101">
  </div>

  <div class="flex-container">
  
    <div class="flex-item">
    text of flex-item 1 goes into the box here.
    </div>
    
    <div class="flex-item">
    text of flex-item 2 goes into the box here.
    </div>
    
    <div class="flex-item">
    text of flex-item 3 goes into the box here.
    </div>
    
    <div class="flex-item">
    text of flex-item 4 goes into the box here.
    </div>
    
  </div>

  </main>

</body>

如您所见，代码显示了一个由.image和.flex-items下面.flex-container内的四个.image组成的网页。这些弹性项目用于使网页具有响应性。因此，我对其应用了.flex-wrap属性。

现在的问题是，当我最小化从台式机到移动设备的大小时，最后一个flex-item将完全低于其他三个flex items。
但是，我想实现总是至少有2个项目在同一行，因此在上述情况下，当最后一个项目降低一个级别时，第三个项目也应该匹配。

要实现此目的，我需要更改代码什么？

Answer 1

关于问题here，解决方案是将四个项目分为两个sub-containers，其中每个容器由两个项目组成，并在主{{1 }}。该代码也可以在min-width: 150px; here中找到。

.flex-container

JS fiddle

使用flex-wrap时，一行中固定数量的flex-item

1 个答案: