html - CSS flex wrap 但没有换行

Question

我遇到了 flex-wrap 的问题。我需要 flex-wrap: wrap 来确保图像换行并且不会用完容器。我不需要换行链接。请参阅下面我的问题，我的代码也包含在帖子中。

JSFiddle

HTML

<div class="box">
  <div class="image">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

<div class="box">
  <div class="image">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.</a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

SCSS

.box {
  border: 1px solid gray;
  width: 100%;
  display: flex;
  margin-bottom: 15px;
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  .image {
    float: left;
    width: 60%;
    border-right: 1px solid gray;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 5px;
    a {
      text-decoration: none;
      &:not(:last-of-type) {
        margin-right: 5px;
      }
    }
  }
  .tools {
    float: left;
    width: 40%;
    padding: 5px;
  }
}

Answer 1

您可以通过添加

来实现此目的

.box .image a:last-of-type {
  flex: 1 1 0;
}

.box {
  border: 1px solid gray;
  width: 100%;
  display: flex;
  margin-bottom: 15px;
}

.box:after {
  content: "";
  display: table;
  clear: both;
}

.box .image {
  float: left;
  width: 60%;
  border-right: 1px solid gray;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 5px;
}

.box .image a {
  text-decoration: none;
}

.box .image a:last-of-type {
  flex: 1 1 0;
}

.box .image a:not(:last-of-type) {
  margin-right: 5px;
}

.box .tools {
  float: left;
  width: 40%;
  padding: 5px;
}

<div class="box">
  <div class="image">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>

<div class="box">
  <div class="image">
    <a href="#"><img src="https://dummyimage.com/80x80/000/fff"></a>
    <a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing dolor sit amet, consectetur.</a>
  </div>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>