Фотоколлаж из 6 фотографий с помощью flexbox - PullRequest
Новая
       21

Фотоколлаж из 6 фотографий с помощью flexbox

4 голосов
/ 11 марта 2019

Я новичок во flexbox, и пытаюсь использовать его, чтобы выложить фотоколлаж из 6 фотографий, например так: correct

Я хочу, чтобы фотографии были выложены в порядке нумерации, чтобы при наличии менее 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>

Но это создает этот макет:

* +1012 *incorrect

По какой-то причине, flex-wrap не помещает фото 3 туда, куда я хочу, даже если для этого есть место. Я попытался поиграться с justify-content и align-items, но не могу заставить его работать.

Есть ли способ сделать это, не вводя больше

с?

Ответы [ 2 ]

3 голосов
/ 11 марта 2019

CSS Grid Solution

Поскольку у вас нет ограничений в отношении 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>
0 голосов
/ 11 марта 2019

Вы можете сделать это так же, как с помощью 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;
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...