Question

＆＃13;

body {
  background-image: url('../images/dust_scratches.png');
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  font-family: Arial, Helvetica, sans-serif;
  color: #777777;
}

.wrapper {
  border: 2px solid blue;
  max-width: 960px;
  padding: 0px 20px 0px 20px;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  max-height: 800px;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" />
</head>

<body>

  <div class="wrapper">


    <a href="https://placeholder.com"><img src="http://via.placeholder.com/247x208"></a>
    <a href="https://placeholder.com"><img src="http://via.placeholder.com/247x208"></a>
    <a href="https://placeholder.com"><img src="http://via.placeholder.com/247x208"></a>
    <a href="https://placeholder.com"><img src="http://via.placeholder.com/247x208"></a>
    <a href="https://placeholder.com"><img src="http://via.placeholder.com/247x208"></a>


  </div>

</body>

</html>

＆＃13;

所以我想尽可能使用flexbox。但是在提供全屏的初始页面加载时，我想每行只显示两个图像，然后最后一行只有一个图像。但是，如果我收缩页面，它会响应调整。

我怎样才能实现这个目标？

如果容器宽度大于里面的图像。我如何使用flexbox以便在下面每行只显示两个图像？

0 个答案: