0

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

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

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

5
  • медиа бокс какой то , просто вёрстка , order в помощь
    – user33274
    13 дек 2016 в 14:17
  • Да, я тоже так решил, но проблема в том, что в десктопе из-за флекса не прижимается текст к тайтлу joxi.ru/gmv9B4zCjqkXra 13 дек 2016 в 14:24
  • вообще рекомендую исправить вопрос и вставить html и css , со скринами прошу приводить с собой б.Вангу
    – user33274
    13 дек 2016 в 14:25
  • @AlekseiSievriukov ваще для моего развития , что такое медиа бокс ?
    – user33274
    13 дек 2016 в 14:31
  • @Geyan если в кратце, это картинка слева, а тайтл с текстом справа 13 дек 2016 в 14:33

2 ответа 2

2

Вот таким образом это можно решить с помощью одного 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>

3
  • Отличное решение, действительно работает, но к сожалению тут используется flex-direction: column; который не поддерживается в IE10... Есть ли возможность как-то обойти flex-direction: column; 14 дек 2016 в 9:32
  • @AlekseiSievriukov, вы до сих пор пользуетесь IE? Его поддержка уже давно закончилась. В новом браузере Microsoft Edge всё работает
    – Yuri
    14 дек 2016 в 9:37
  • Увы, я бы с радостью, но большое спасибо за ваш ответ 14 дек 2016 в 10:53
0

$(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>

6
  • Спасибо большое, а без подключения masonry оно никак не получится? 13 дек 2016 в 15:00
  • @AlekseiSievriukov, вряд ли
    – Yuri
    13 дек 2016 в 15:03
  • почему же не получится без масонри ?
    – user33274
    13 дек 2016 в 15:38
  • @Geyan, если у вас получится, то добавьте в ответ как
    – Yuri
    13 дек 2016 в 15:39
  • @Yuri получится , но делать не буду - пора на работу
    – user33274
    13 дек 2016 в 15:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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