Question

我的flex元素包含4张图片。我希望这4个图像显示在两行而不是一行上。是否可以使用flex强制执行此类操作？

<div>
<img src="image1.jpg />
<img src="image2.jpg />
<img src="image3.jpg />
<img src="image4.jpg />
</div>

div {
    display: flex;
}

Answer 1

在您的<img>标记上，您可以flex: 1 50%;，然后放在<div>上flex-wrap: wrap;，或者您可以在<br />之后添加<div> <div class='container'><img src="image1.jpg /> <div class='container'><img src="image2.jpg /> <div class='container'><img src="image3.jpg /> <div class='container'><img src="image4.jpg /> </div> div { display: flex; flex-wrap: wrap; } .container { flex: 1 50%; } img标签

编辑：

EXEC SQL
  Select txt_email_body
    into :mailText
    from email_request
   where  .....

这样的事可能有用吗？

Answer 2

<div class="flex">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
</div>

<style>
    .flex {
        display: flex;
        flex-wrap: wrap;
    }

    .flex > img {
        display: flex;
        flex-basis: 50%;
    }
</style>

如何强制执行flex wrap？

2 个答案: