Question

我使用flexbox在左侧显示div image，在右侧显示text。我希望image只调整x轴而不调整y，但要保持其比例。对于我想要的text div，只要它在x轴上调整大量，就会显示在image下方。我用：

<html>
<head>
<style>
.outer {
    background-color: gray;
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
}
.img {
    max-height: 468px;
    max-width: 100%;
    margin-right: 10px;
}
.txt {
    border: 1px solid yellow;
}
</style>
</head>
<body>

<div class="outer">
    <img class="img" src="http://treepicturesonline.com/ebonytreesunset.jpg">
    <div class="txt">
        In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower, including only woody plants with secondary growth, plants that are usable as lumber or plants above a specified height. Trees are not a taxonomic group but include a variety of plant species that have independently evolved a woody trunk and branches as a way to tower above other plants to compete for sunlight. Trees tend to be long-lived, some reaching several thousand years old. In looser definitions, the taller palms, tree ferns, bananas and bamboos are also trees. Trees have been in existence for 370 million years. It is estimated that there are just over 3 trillion mature trees in the world.[1]
    </div>
</div>

</body>
</html>

现在，这部分有效。如果我用一个像Test这样的小文本替换这个文本墙，那么它会显示在右侧，如果重新调整大小，它会根据需要调到底部，但是这一个直接进入底部...然后图像确实仅调整为x但不保持其比例...如何解决这两个问题？

由于

Answer 1

您可以使用媒体查询执行此操作，也可以使用min-width。

执行此操作

当与flex-grow结合使用时，它会在换行时占据整个宽度，flex-basis会使它们在没有的时候共享宽度。

为了获得最佳的跨浏览器支持，我还包装了img

Fiddle demo

Stack snippet

＆＃13;

.outer {
  background-color: gray;
  display: flex;
  flex-wrap: wrap;
}
.outer .img {
  flex-grow: 1;
  flex-basis: calc(50% - 20px);
  margin: 10px;
  min-width: 300px;
}
.img img {
  display: block;
  max-width: 100%;
}
.txt {
  flex-grow: 1;
  flex-basis: calc(50% - 22px);    /*  22px = 2*10px margin + 2*1px border  */
  border: 1px solid yellow;
  margin: 10px;
  min-width: 300px;
}

＆＃13;

<div class="outer">
  <div class="img">
    <img src="http://treepicturesonline.com/ebonytreesunset.jpg">
  </div>
  <div class="txt">
    In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower, including only woody plants with secondary growth, plants that are usable
    as lumber or plants above a specified height. Trees are not a taxonomic group but include a variety of plant species that have independently evolved a woody trunk and branches as a way to tower above other plants to compete for sunlight. Trees tend
    to be long-lived, some reaching several thousand years old. In looser definitions, the taller palms, tree ferns, bananas and bamboos are also trees. Trees have been in existence for 370 million years. It is estimated that there are just over 3 trillion
    mature trees in the world.[1]
  </div>
</div>

＆＃13;

HTML CSS flexbox图像和文本

1 个答案: