Question

我正在玩CSS Flexbox和媒体查询，我偶然发现了这个问题。考虑到我的以下代码，虽然我将div项目宽度设置为100％，但我无法将Flex容器中最后一个div项目中的最后一个图像拉伸到全宽。我怎样才能做到这一点？这是我的代码：

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <title>Playing with CSS Flexbox</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="layoutstyle.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <header>
            <nav>
                <div class="logo">
                </div>
                <ul>
                    <li>
                    </li>
                </ul>
            </nav>
        </header>
        <main id="container">
            <div class="featured">
            </div>
            <div class="flexbox col-1">
                <img src=images/singapore-small.jpg alt=""
                     sizes="(min-width: 650px) 70vw, 100w"
                     srcset="images/singapore-x-small.jpg 400w,
                             images/singapore-small.jpg 600w,
                             images/singapore-medium.jpg 800w,
                             images/singapore-large.jpg 1000w,
                             images/singapore-x-large.jpg 1500w
                             "
                     />
            </div>
            <div class="flexbox col-2">

                <img src=images/skyscrapers-small.jpg alt=""
                     sizes="(min-width: 650px) 70vw, 100w"
                     srcset="images/skyscrapers-x-small.jpg 400w,
                             images/skyscrapers-small.jpg 600w,
                             images/skyscrapers-medium.jpg 800w,
                             images/skyscrapers-large.jpg 1000w,
                             images/skyscrapers-x-large.jpg 1500w
                             "
                     />

            </div>
            <div class="flexbox col-3">

                <img src=images/sunset-small.jpg alt=""
                     sizes="(min-width: 650px) 70vw, 100w"
                     srcset="images/sunset-x-small.jpg 400w,
                             images/sunset-small.jpg 600w,
                             images/sunset-medium.jpg 800w,
                             images/sunset-large.jpg 1000w,
                             images/sunset-x-large.jpg 1500w
                             "
                     />

            </div>
        </main>
    </body>
</html>

//////// CSS //////

* {
    box-sizing: border-box;
}

body,html {
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
}

 li {
    padding: 0;
     list-style-type: none;
}

header {
    display: flex;
}

main {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 100%;
}

@media all and (max-width: 650px) {

    .flexbox {
        width: 100%;
    }

}

@media all and (min-width: 651px) {

    .col-1, .col-2 {
        width: 50%;
    }

    .col-3 {
        width: 100%;
    }
}

Answer 1

将此添加到您的CSS中以最大化您的图片：

.flexbox img {
  width: 100%;
  height: auto;
}

Demo at CodePen

Answer 2

如果较旧的浏览器兼容性不是问题，那么仅使用flex-box属性就可以实现此目的。因此，无论容器中的flex项目数量如何，最后的奇数项目总是延伸。

@RestController
@SpringBootApplication
public class Application {

    private static Logger log = LoggerFactory.getLogger(Application.class);

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);

        RestTemplate restTemplate = new RestTemplate();
        String badUrl = "http://localhost:8080/greetings";
        for (HttpMethod httpMethod : HttpMethod.values()) {
            try {
                restTemplate.execute(badUrl, httpMethod, null, null);
            } catch (Exception e) {
                log.error("Failed to " + httpMethod + " -- " + e.getMessage());
            }
        }
    }

    @RequestMapping("/greeting")
    public String greeting() {
        return "hello";
    }
}

告诉flex项目在必要时它应该采取多少空间（与其他人成比例）。

如果所有项目的flex-grow都设置为1，则容器中的剩余空间将平均分配给所有子项。如果其中一个孩子的值为2，则剩余空间占用的空间是其他孩子的两倍（或者至少会尝试）。 source＆amp;更多详情：css-tricks.com

以下是基本想法，

flex-grow: unitless value;

CodePen Example

将弹性项目内的图像拉伸到全宽

2 个答案: