Адаптивная верстка psd

326

10 июля 2017, 16:55

Всем привет! Возник вопрос. Пытаюсь расположить несколько элементов с помощью Masonry/flex и сделать так чтобы они адаптивно вели себя. Но в итоге при сужении окна, верстка постоянно ломается.

<div class="page-2" data-masonry='{ "itemSelector": ".element-item", "columnWidth": 200 "stamp": ".element-item1" }'> 
        <div class="container" > 
            <img class="element-item1" src="styles/images/pic1.png" alt="logor"/> 
            <div class="containers"> 
                <div class="element-item"> 
                    <div class="text"> 
                        <img src="styles/images/icone2.png"> 
                        <h2>Vintage olivia</h2> 
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> 
                    </div> 
                </div> 
                     <img class="element-item" src="styles/images/pic2.png" alt="logors"/> 
            </div> 
        </div> 
    </div>

 .page-2 { 
      max-width: 1600px; } 
       
      .page-2 .element-item1 { 
        width: 60%; 
        height: auto; } 
       
      .page-2 .containers { 
        width: 40%; 
        height: auto; 
        display: flex; 
        flex-direction: column; 
        align-content: flex-end; 
        text-align: center; } 
         
        .page-2 .containers .element-item h2 { 
          text-align: center; 
          padding: 20px 0 20px 0; } 
         
        .page-2 .containers .text { 
          max-width: 400px; 
          margin: 0 auto; } 
           
          .page-2 .containers .text img { 
            text-align: center; 
            padding-top: 5px; } 
           
          .page-2 .containers .text p { 
            text-align: justify; } 
     
        .page-2 .containers .element-item h2 { 
          font-family: 'Lato', sans-serif; 
          font-size: 1.000em; 
          text-transform: uppercase; 
          color: black; 
          font-weight: bold; 
          letter-spacing: 0.313em; } 
         
        .page-2 .containers .text p { 
          font-family: 'Lato', sans-serif; 
          font-size: 0.825em; 
          color: #848789; 
          line-height: 2.000em; 
          padding-bottom: 10px; }

В идеале должно выглядеть так

Подскажите как это сделать адекватнее, чтобы верстка не ломалась каждые 50 пикселов. В этом примере всего три элемента, а если их будет больше, то это каждые 50 пикселов медиазапросы задавать? Вообще подскажите что в таких случаях делать, какими плагинами пользоваться или селекторами.

По ссылке макет psd блока. http://my-files.ru/xcaecu

Answer 1

Что то похоже но это не Masonry

Источник : https://codepen.io/hubpork/pen/oZLZVq

Больше примеров : codepen search masonry + flexBox

* { 
  box-sizing: border-box; 
} 
 
@media (min-width: 60em) { 
  .flex { 
    display: flex; 
  } 
 
  .masonry { 
    flex-direction: row; 
    max-width: 1024px; 
    margin: 0 auto; 
  } 
  .masonry__section { 
    flex-direction: column; 
    -webkit-box-flex: 0; 
    -webkit-flex: 0 0 33.33333%; 
    -ms-flex: 0 0 33.33333%; 
    flex: 0 0 33.33333%; 
    max-width: 33.33333%; 
  } 
} 
@media (min-width: 60em) { 
  .masonry__section + .masonry__section { 
    margin-left: 10px; 
  } 
} 
.masonry__article { 
  padding: 20px; 
  background-color: crimson; 
  color: #FFF; 
  outline: 1px solid; 
  margin-bottom: 10px; 
} 
@media (min-width: 60em) { 
  .masonry__article { 
    margin-bottom: 0; 
  } 
} 
@media (min-width: 60em) { 
  .masonry__article + .masonry__article { 
    margin-top: 10px; 
  } 
}

<div class="flex masonry"> 
  <div class="flex masonry__section"> 
    <div class="flex masonry__article"> 
      <p> 
        First column. Row 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum illum dolor in eligendi nam sit quae dolorem ullam velit, officiis incidunt fugit, iure beatae repudiandae esse a corrupti. Eligendi, cum. 
      </p> 
    </div> 
    <div class="flex masonry__article"> 
      <p> 
        First column. Row 2. Lorem ipsum dolor. 
      </p> 
    </div> 
    <div class="flex masonry__article"> 
      <p> 
        First column. Row 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda quod, voluptates velit earum, possimus neque! 
      </p> 
    </div> 
  </div> 
  <div class="masonry__section"> 
    <div class="flex masonry__article"> 
      <p> 
        Secondary column. Row 1. Lorem ipsum dolor. 
      </p> 
    </div> 
    <div class="flex masonry__article"> 
      <p> 
        Secondary column. Row 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi commodi ullam quos totam veniam similique cupiditate quas vero rem tempore! 
      </p> 
    </div> 
    <div class="flex masonry__article"> 
      <p> 
        Secondary column. Row 3. Lorem ipsum dolor sit amet. 
      </p> 
    </div> 
  </div> 
  <div class="masonry__section"> 
    <div class="flex masonry__article"> 
      <p> 
        Third column. Row 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt quae, quasi numquam magnam officiis architecto optio aliquid perferendis maiores, delectus sint quo earum nesciunt. Tempora nobis totam officia nulla voluptate officiis, 
        optio ipsum necessitatibus quaerat velit tenetur dicta. Magni tenetur necessitatibus omnis itaque, dicta quaerat, tempore at nobis quis accusamus. 
      </p> 
    </div> 
    <div class="flex masonry__article"> 
      <p> 
        Third column. Row 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, omnis? 
      </p> 
    </div> 
    <div class="flex masonry__article"> 
      <p> 
        Third column. Row 3. Lorem ipsum. 
      </p> 
    </div> 
  </div> 
</div>