Как объединить контейнеры в макет flexbox?

Question

У меня есть простой макет flexbox, как это:

html, body {
margin:0;
padding:0;
background:grey;
}

.container {
display:flex;
flex-direction:row;
}

.image1, .image2, .image3, .image4, .image5, .image6 {
padding:10px;
}

img {
  max-width:100%;
}

<div class="container">
  <div class="image1">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image2">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image3">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

<div class="container">
  <div class="image4">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

<div class="container">
  <div class="image5">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image6">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

В настоящее время я делаю это с 3 отдельными гибкими контейнерами, я пытаюсь объединить все в 1.

Могу ли я сделатьэто с flexbox или CSS сетка будет более подходящей?

Answer 1

Макет (с одним контейнером) относительно прост и удобен при использовании CSS Grid.

Использование Grid линейного размещения методов для позиционирования элементов сетки исоздать области сетки.

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
}

.image1, .image2, .image3 {
  grid-column: span 2;
}

.image4 {
  grid-column: 1 / -1;
  justify-self: center; /* optional */
}

.image5, .image6 {
  grid-column: span 3;
}

img {
  max-width: 100%;
}

body {
  margin: 0;
  padding: 10px;
  background: grey;
}

<div class="container">
  <div class="image1">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image2">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image3">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image4">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image5">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image6">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

jsFiddle demo

Answer 2

Могу ли я сделать это с помощью flexbox

Да, используя свойство flex-wrap и значение wrap , которое заставит элементыдля переноса на несколько строк.

html, body {
  margin: 0;
  background: grey;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.image {
  padding: 10px;
  box-sizing: border-box;
}

img {
  width: 100%;
}

.third {
  width: 33.333%;
}

.half {
  width: 50%;
}

.full {
  width: 100%;
}

<div class="container">
  <div class="image third">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image third">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image third">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image full">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image half">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image half">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>

---

Вы можете сделать его еще короче, используя flex вместо width.

html, body {
  margin: 0;
  background: grey;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.image {
  flex: 1 0 0;
  padding: 10px;
  box-sizing: border-box;
}

.image.full {
  flex: none;
  width: 100%;
}

img {
  width: 100%;
}

<div class="container">
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image full">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
  <div class="image">
    <img src="https://dummyimage.com/1000x400/000/fff">
  </div>
</div>