2

* {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
  background-color: #acacac;
}

.flex-container {
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

.dualblock img {
  display: block;
  margin-bottom: 2px;
}

.flex-element:not(:last-child) {
  margin-right: 6px;
}

@media only screen and (max-width: 925px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-element {
    border: 1px solid red;
  }
}
<div class="container">
  <div class="flex-container">
    <div class="flex-element">
      <div class="dualblock">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
      </div>
    </div>
    <div class="flex-element">
      <img src="http://wallpaperscraft.ru/image/nacionalnyy_park_kanada_britanskaya_kolumbiya_ozero_gory_derevya_dog_lake_14665_300x400.jpg" alt="">
    </div>
    <div class="flex-element">
      <div class="dualblock">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
      </div>
    </div>
  </div>
</div>

Есть такая секция:

введите сюда описание изображения

Как ее сверстать с помощью FlexBox'a так, что бы потом можно было адаптировать?

Получилось только вот так(при адаптиве):

введите сюда описание изображения

Т.к. флекс элементы заняли 100% ширину флекс контейнера. Добился с такого состояния при помощи медиа, задал при ширине 525px и flex-direction: column :

введите сюда описание изображения

5
  • тебе надо сюда добавить код, что бы получить ответ... самодостаточный воспроизводимый привет...
    – Air
    12 ноя 2017 в 7:14
  • jsfiddle.net/ghb3ogd0
    – uzi_no_uzi
    12 ноя 2017 в 7:24
  • @Air, ты уже второй раз пишешь "привет" вместо "пример", поэтому снова тебе Привет))
    – DaemonHK
    12 ноя 2017 в 9:13
  • @DaemonHK ))) не замечал... в следующий раз буду внимательней, это когда с трубы авто-замена, чтоб ее черти....
    – Air
    12 ноя 2017 в 9:15
  • @Air, Зайдите на JSFiddle, там пример(уменьшите окно), единственное что нужно это сделать так что бы картинки стали посредине, как это сделать?
    – uzi_no_uzi
    12 ноя 2017 в 9:16

2 ответа 2

2

у меня вышел такой вариант

к .flex-container вместо justify-content: center; прописал justify-content: flex-start; чтоб блоки были с лева на право и для .flex-container по нижей 925px, вместо flex-direction: column; прописал flex-direction: row; и дал flex-wrap:wrap; чтоб блоки уложились в 2 уровня

Ниже

* {
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
  background-color: #acacac;
}

.flex-container {
  display: flex;
  justify-content: center;
  border: 1px solid red;
}

.flex-element img {
  display: block;
  margin-bottom: 2px;
  width: 100%;
}

.flex-element:not(:last-child) {
  margin-right: 6px;
}

@media only screen and (max-width: 925px) {
  .flex-container {
    flex-direction: row;
    flex-wrap:wrap;
  }
  .flex-element {
    border: 1px solid red;
    width:75%;
  }
  .flex-element:not(:last-child) {
  margin-right: 0px;
}
}
<div class="container">
  <div class="flex-container">
    <div class="flex-element">
      <div class="dualblock">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
      </div>
    </div>
    <div class="flex-element">
      <img src="http://wallpaperscraft.ru/image/nacionalnyy_park_kanada_britanskaya_kolumbiya_ozero_gory_derevya_dog_lake_14665_300x400.jpg" alt="">
    </div>
    <div class="flex-element">
      <div class="dualblock">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
      </div>
    </div>
  </div>
</div>

А далее вы уже можете при адаптации писать ширину в % для .flex-element

4
  • Это не то что мне нужно, результат то не изменился. Нужно что бы блоки разместились по середине при 925px; и растянулись на 75% допустим.
    – uzi_no_uzi
    12 ноя 2017 в 9:09
  • добавил '.flex-element img{width:100%;}' чтоб картинка была на всю ширину блока код выше немного под правил
    – klifort
    12 ноя 2017 в 9:17
  • Спасибо, теперь буду с этим разбираться.
    – uzi_no_uzi
    12 ноя 2017 в 9:17
  • бо как по мне лутше вместо column писать row с flex-wrap:wrap; тогда блоки уже будут укладаться не в одну линию а в несколько
    – klifort
    12 ноя 2017 в 9:24
2

я не знаю твоих планов, в @media сам определишь правило, что бы было как хочешь

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: row;
  align-content: stretch;
  justify-content: center;
  max-width: 1600px;
  margin: 0 auto;
  background-color: #acacac;
}

.flex-container {
  display: flex;
  flex-direction: row;
  align-content: stretch;
  justify-content: center;
  border: 1px solid red;
}

.dualblock img {
  display: block;
  margin-bottom: 2px;
}

.flex-element:not(:last-child) {
  margin-right: 6px;
}

@media only screen and (max-width: 925px) {
  .flex-container {
    display: flex;
    flex-direction: row;
    align-content: stretch;
    justify-content: center;
  }
  .flex-element {
    border: 1px solid red;
  }
}
<div class="container">
  <div class="flex-container">
    <div class="flex-element">
      <div class="dualblock">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
      </div>
    </div>
    <div class="flex-element">
      <img src="http://wallpaperscraft.ru/image/nacionalnyy_park_kanada_britanskaya_kolumbiya_ozero_gory_derevya_dog_lake_14665_300x400.jpg" alt="">
    </div>
    <div class="flex-element">
      <div class="dualblock">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
        <img src="https://million-wallpapers.com/wallpapers/5/19/small/478487195100977.jpg" alt="">
      </div>
    </div>
  </div>
</div>

3
  • Уже выше дали решение, спасибо :)
    – uzi_no_uzi
    12 ноя 2017 в 9:43
  • тогда прими ответ, не оставляй без внимания человека..
    – Air
    12 ноя 2017 в 9:45
  • Я не знал как это делается, принял уже :)
    – uzi_no_uzi
    12 ноя 2017 в 9:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.