CSS flex换行，但不换行

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>

Answer 2

隐藏的最小宽度和溢出

如果您使用min-width中的80px（它是图像框的大小）并添加overflow:hidden，则一切正常，没有任何问题。

为了使演示更好，我将其他列设为min-width的{​​{1}}和总计80px min-width（2x80px），并给了所有容器160px

工作演示

看到它正常工作here

代码

SCSS

overflow:hidden

HTML

.box {
  border: 1px solid gray;
  width: 100%;
  display: flex;
  margin-bottom: 15px;
  min-width:160px;
  overflow:hidden;
  &:after {
    content: "";
    display: table;
    clear: both;

  }
  .image {
    float: left;
    width: 60%;
    min-width:80px;
    overflow:hidden;
    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;
    overflow:hidden;
    flex-wrap: wrap;
    min-width:80px;
  }
}

Answer 3

请检查我的提琴在何处添加了解决方法https://jsfiddle.net/Lazzaro/vkrh48tn/

我添加了新课程

.image2 {
    width: 60%;
    border-right: 1px solid gray;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 5px;
    a {
      text-decoration: none;
      &:not(:last-of-type) {
        margin-right: 5px;
      }
    }
  }

它有效

Answer 4

您可以在单个框和文本周围添加一个额外的容器。将其定义为flexbox，它将根据您的需求进行缩放。

* {
  box-sizing: border-box;
}

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

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

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

.image a {
  text-decoration: none;
}

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

.tools {
  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">
    <div style="display:flex; align-items: center;">
    <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>
  <div class="tools">
    <a href="#">View details</a>
  </div>
</div>