Question

我是flexbox的新手，并试图用它来布置最多6张照片的照片拼贴，如下所示：

我希望这些照片按编号排列，以便当少于6张照片时，每张照片在上方的位置保持不变，只是缺少照片的空白空间。

这就是我所拥有的：

<html>
<head>
    <style type="text/css">
        .container {
            width: 600px;
            height: 600px;
            background-color: blue;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
        }
        .photo {
            background-color: red;
        }
        .large {
            width: 400px;
            height: 400px;
        }
        .small {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="photo large">Photo 1</div>
        <div class="photo small">Photo 2</div>
        <div class="photo small">Photo 3</div>
        <div class="photo small">Photo 4</div>
        <div class="photo small">Photo 5</div>
        <div class="photo small">Photo 6</div>
    </div>
</body>
</html>

但这会产生以下布局：

由于某种原因，即使有空间，flex-wrap也不会将照片3放在我想要的位置。我尝试摆弄辩解内容和对齐项目，但似乎无法使其正常工作。

是否有必要这样做而不必引入更多的

？

2 个答案:

答案 0 :(得分：3)

答案 1 :(得分：0)

Answer 1

CSS网格解决方案

由于您没有关于CSS Grid的限制，因此请看看在x和y方向上布置项目时，它可以为您做什么。 grid-template-area属性使处理这种类型的布局变得很简单。您可以在父元素中定义模板区域，然后将子元素放置在您想要的任何区域。您可以想象，这确实打开了您可以在不同的响应/自适应上下文中执行的操作。

.container {
  width: 600px;
  height: 600px;
  background-color: blue;
  display: grid;
  grid-template-areas: "largetop largetop smalltop1" 
                       "largetop largetop smalltop2" 
                       "smallbottom1 smallbottom2 smallbottom3";
}

.photo-1 {
  grid-area: largetop;
}

.photo-2 {
  grid-area: smallbottom1;
}

.photo-3 {
  grid-area: smallbottom2;
}

.photo-4 {
  grid-area: smalltop1;
}

.photo-5 {
  grid-area: smalltop2;
}

.photo-6 {
  grid-area: smallbottom3;
}

.photo {
  background-color: red;
}

.large {
  width: 400px;
  height: 400px;
}

.small {
  width: 200px;
  height: 200px;
}

<div class="container">
  <div class="photo photo-1 large">Photo 1</div>
  <div class="photo photo-2 small">Photo 2</div>
  <div class="photo photo-3 small">Photo 3</div>
  <div class="photo photo-4 small">Photo 4</div>
  <div class="photo photo-5 small">Photo 5</div>
  <div class="photo photo-6 small">Photo 6</div>
</div>

jsFiddle

Flexbox解决方案

大图片占用了可用的容器空间后，以下两项通过flex-wrap: wrap包装到下一行。

.container {
  width: 600px;
  height: 600px;
  background-color: blue;
  display: flex;
  /* row direction  */
}

.left {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 400px;
}

.photo {
  background-color: red;
}

.large {
  width: 400px;
  height: 400px;
}

.small {
  width: 200px;
  height: 200px;
}

<div class="container">
  <div class="left">
    <div class="photo large">Photo 1</div>
    <div class="photo small">Photo 2</div>
    <div class="photo small">Photo 3</div>
  </div>
  <div class="right">
    <div class="photo small">Photo 4</div>
    <div class="photo small">Photo 5</div>
    <div class="photo small">Photo 6</div>
  </div>
</div>

Answer 2

您也可以使用display flex（主轴）来完成这些操作，只需将每列包装在div中即可。

HTML

<!-- -- you can divide the container by two and add display: flex (main axis) -- -->
    <div class="container">

        <!-- first column -->

        <div class="col-1">
            <div class="photo large">Photo 1</div>
            <div class="col-1-parent">
                 <div class="photo col-1-child">Photo 2</div>
                 <div class="photo col-1-child">Photo 3</div> 
            </div>
        </div>

        <!-- second column -->


        <div class="col-2">
            <div class="photo col-2-child">Photo 4</div>
            <div class="photo col-2-child">Photo 5</div>
            <div class="photo col-2-child">Photo 6</div>
        </div>

    </div>

CSS

 .container {
            width: 600px;
            height: 600px;
            background-color: blue;
            display: flex;
        }

        .photo{
            background-color: red;
        }

        /*--- first column here ---*/

        .col-1{
            width: 400px;
            height: 600px;
            display: flex;
            flex-direction: column;
        }

        .large{
            width: 400px;
            height: 400px;
        }

        .col-1-parent{
            display: flex;
        }

        .col-1-child {
            width: 200px;
            height: 200px;
        }

        /*--- Second column here ---*/

        .col-2{
            width: 200px;
            height: 600px;
            display: flex;
            flex-direction: column;
        }

        .col-2 .col-2-child{
            width: 200px;
            height: 200px;
        }

使用flexbox最多可拼贴6张照片

2 个答案:

CSS网格解决方案

Flexbox解决方案