Media Box с помощью flex

353

21 декабря 2016, 04:00

Как сделать media box с помощью flexbox только не разбивать его на 2 колонки как здесь

https://philipwalton.github.io/solved-by-flexbox/demos/media-object/

То есть должны быть только 3 блока на одном уровне, которые объединены родителем flexbox-ом. Изначальная задача выглядит так - http://joxi.ru/KAx7l4NI9Zxa28 Обычный MediaBox в десктопе превращается в мобильной версии в не стандартный MediaBox.

Answer 1

Вот таким образом это можно решить с помощью одного CSS

@media (max-width: 287px) { 
  .flexboxes { 
    width: auto; 
    height: auto; 
  } 
  .flexboxes .title {width:100px;height: 16px;order:1} 
  .flexboxes .img {width:100px;height:250px;order:2} 
  .flexboxes .text {width:100px;height:100px;order:3} 
  .flexboxes .button {width:40px;height: 16px;order:4} 
} 
.flexboxes { 
    display: flex; 
    flex-wrap: wrap; 
    flex-direction: column; 
    width: 288px; 
    height: 285px; 
} 
.flexboxes .block { 
  display: block; 
  font-family: arial; 
  padding: 10px; 
  border: 2px solid red; 
  font-weight: 700; 
  color: red; 
  margin:10px; 
} 
.flexboxes .title {width:100px;height: 16px;order:1} 
.flexboxes .img {width:100px;height:250px;order:4} 
.flexboxes .text {width:100px;height:100px;order:2} 
.flexboxes .button {width:40px;height: 16px;order:3}

<div class="flexboxes"> 
  <div class="block title">Title</div> 
  <div class="block text">Text</div> 
  <div class="block button">But</div> 
  <div class="block img">Img</div> 
</div>

Answer 2

$(function() { 
  $('.flexboxes').masonry({ 
    itemSelector: '.block' // обращаемся к пунктам 
  }); 
});

.flexboxes { 
    display: flex; 
    flex-wrap: wrap; 
    width: 288px; 
} 
.flexboxes .block { 
  display: block; 
  font-family: arial; 
  padding: 10px; 
  border: 2px solid red; 
  font-weight: 700; 
  color: red; 
  margin:10px; 
} 
.flexboxes .title {width:100px;height: 16px;} 
.flexboxes .img {width:100px;height:250px;} 
.flexboxes .text {width:100px;height:100px;} 
.flexboxes .button {width:40px;height: 16px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script> 
 
<div class="flexboxes"> 
  <div class="block title">Title</div> 
  <div class="block img">Img</div> 
  <div class="block text">Text</div> 
  <div class="block button">But</div> 
</div>