2

Народ как с помощью flex расположить блоки помечены красними рамками в таком порядке как на картинке?

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

*,
*::after,
*::before{
  box-sizing: border-box;
}

.container{
  max-width: 1140px;
  margin: 0 auto; 
}

.clearfix::after{
  content: '';
  display: table;
  clear: both;
}

.product_item--float{
  float: left;
  margin-right: 30px;
}

.product_link{
  display: block; 
}
 <div class="section2">
    <div class="container">
      <h2>Каталог круизов</h2>
      <span>Сортировать круизы по цене</span>

      <div class="product__block">
        <div class="product_item product_item--float">
          <img src="https://via.placeholder.com/555x437" alt="">
          <a class="product_link" href="#">Морской круиз в Анапу</a>
          <p class="product_p">Маршрут: Сочи-Лазаревское-Геленджик-Анапа<br>
            Продолжительность: 10 ч. 0 мин.</p>
          <span class="product_price">49 000 руб.</span>
        </div>

        <div class="product_item">
          <img src="https://via.placeholder.com/555x113" alt="">
          <a class="product_link" href="#">Обзорная морская прогулка с экскурсией</a>
          <p class="product_p">Маршрут: Сочи-Адлер-Сочи (без высадки)<br>
            Продолжительность: 1 ч. 0 мин.</p>
          <span class="product_price">5 000 руб.</span>
          <span class="product_price-old">15000 руб.</span>
        </div>
        <div class="product_item clearfix">
          <img src="https://via.placeholder.com/555x113" alt="">
          <a class="product_link" href="#">Морская прогулка в Геленджик</a>
          <p class="product_p">Маршрут: Сочи-Туапсе-Геленджик<br>
            Продолжительность: 12 ч. 30 мин.</p>
          <span class="product_price">7 000 руб.</span>
          <span class="product_price-old">10000 руб.</span>
        </div>

        <div class="product_item product_item--float">
          <img src="https://via.placeholder.com/555x215" alt="">
          <a class="product_link" href="#">Морской круиз в Новороссийск</a>
          <p class="product_p">Маршрут: Сочи-Геленджик-Новороссйиск-Геленджик-Сочи<br>
            Продолжительность: 13 ч. 0 мин.</p>
          <span class="product_price">14 800 руб</span>
        </div>
        <div class="product_item">
          <img src="https://via.placeholder.com/555x215" alt="">
          <a class="product_link" href="#">Морская прогулка в Абрау-Дюрсо  </a>
          <p class="product_p">Маршрут: Сочи-Абрау-Дюрсо<br>
            Продолжительность: 11 ч. 0 мин.</p>
          <span class="product_price">14 800 руб</span>
        </div>
      </div>
      <a class="blue__btn" href="#">Больше круизов</a>
    </div>

так должно быть на планшете, а на мобильном все эти блоки в один ряд

так должно быть на планшете, а на мобильном все эти блоки в один ряд

2
  • 1
    Здравствуйте. Оно и действительно, как с помощью flex расположить блоки? Только где блоки-то? - чтобы были блоки, вам нужно выложить свой код, ведь здесь просто некая картинка. А вы ведь спрашиваете, как блоки с помощью flex расположить, следовательно вы знаете, как их можно расположить подобным образом но без flex. Вот и предлагаю вам, выложите свой код с блоками и посмотрим как вы их расположили без флексов, чтобы нам помочь сделать тоже самое, но с флексами. Ведь такой вопрос-картинка провоцирует абсурдные ответы. Большие ли эти блоки и что там с адаптивом? Пока минус ставлю, увы. 22 авг 2018 в 20:50
  • Добавил код, как я сделал с помощу float 25 авг 2018 в 15:30

4 ответа 4

1

Без дополнительных оберток можно сделать фиксированную высоту, колоночное расположение и перенос.

* {
  box-sizing: border-box;
}

div {
  border: 1px solid;
  height: 100px;
  width: 50%;
  padding: 1em;
}

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}

.big {
  height: 200px;
}
<section>
  <div class=big>1</div>
  <div>2</div>
  <div>3</div>
</section>

0

html:

<div class="wrapper">
  <div class="49000"></div>
  <div class="subwrapper">
    <div class="5000"></div>
    <div class="7000"></div>
  </div>
</div>

css:

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* space-between, еще как-нибудь*/
  align-items: stretch;
}

.subwrapper,
.49000, 
.5000,
.7000 {
  flex-basis: 50%;
}

.subwrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* space-between, еще как-нибудь*/
  align-items: stretch;
}
14
  • 2
    Здравствуйте. Сразу же виден промах, зачем-то для .wrapper пишется align-items: stretch; когда это является значением по умолчанию: w3schools.com/cssref/css3_pr_align-items.asp Аналогично flex-direction: row; и justify-content: flex-start; идут по-умолчанию, зачем же мы их пишем? Ваш пример - это отличный путь запутать новичка. Рекомендую доработать ваш пример, а пока минус поставлю, увы. Отредактируете, тогда уберу минус. Еще рекомендую сделать запускаемый код, вместо картинок: placeholder.com Всего вам доброго. 22 авг 2018 в 18:43
  • @Alexandr Kazakov значение по умолчанию говорите. А я считаю явное лучше неявного, в своем коде всегда пишу. За минус спасибо. Добра Вам. Ответ я редактировать не собираюсь, т.к. писал его в соответствии со своими представлениями о необходимом содержании, на которые не влияет обещание кого-либо великодушно убрать свой авторитетный минус. Если у Вас есть альтернативное виденье, то это прекрасная возможность дать свой вариант ответа. Если автор вопроса примет его как верный, это будет лучшим подтверждением Вашей точки зрения на полноту и достаточность ответов. 876a76ab12f56017a5bc47da7c4ca15e.
    – muturgan
    22 авг 2018 в 19:56
  • 1
    А я считаю явное лучше неявного, в своем коде всегда пишу Да нет же, не пишите. Вы ведь не пишите у всех подряд элементов padding: 0, border: none, margin: 0 и так далее. Вы ведь не пишите это у тех элементов, у которых данные свойства и так равняются 0, верно? Ведь тогда даже тегу span вы должны прописывать целый набор свойств, чтобы явно обозначить, что там например нет отступов. Но вы ведь так не делаете... Да ладно вам, признайте просто, что ваш опыт в Flexbox не достаточно велик, вы сами порой путаетесь в нужных свойствах, поэтому и написали все подряд. 22 авг 2018 в 20:05
  • Продолжу. Тогда каждому классу у <div> тега нужно прописывать display: block; а каждому <span> display: inline; И пусть они таковыми по умолчанию являются, чтобы нам явно это обозначить, мы у каждого тега пропишем. Я так и представляю, у каждого div с отдельным классом прописать: display: block; border:none; margin: 0; padding: 0; height: auto; width: auto; position: static; и так далее, длинный список у нас получится. Ну а что, зато явно пропишем, соберем все значения по умолчанию и их пропишем, и так для каждого класса. 22 авг 2018 в 20:18
  • Что ты ко мне примотался Да нет, здесь ведь сообщество, группа людей, мы здесь затем и собрались, что бы обсуждать, учиться. Я просто себя вспомнил, когда только переходил на флексы(до этого пользовался float-ами и bootstrap-3), казалось сложновато, потому что столько новых стилей появилось, я также записывал все подряд, что идет даже по умолчанию. У вас увидел, что из 9 пунктов, прописаны 5, что идут по умолчанию и которые вообще можно не писать, вот и решил высказаться. Я вас понял, больше писать здесь не буду. С миром. Хорошего вам дня. 22 авг 2018 в 20:40
0

Попробуй так

.news div {
  background-color: #f0f;

}

.news .inside div {
  width: 100px;
  height: 100px;
  background-color: #f00;
}

.news {
  display: flex;
}
<div class="news">
  <div>123456</div>
  <div class="inside">
    <div>111</div>
    <div>222</div>
  </div>
  
</div>

-1

bonus. html:

<div class="wrapper">
  <div class="49000"></div>
  <div class="5000"></div>
  <div class="7000"></div>
</div>

css:

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr; /* не очень наглядно. чтобы сделать .5000 в 2 раза больше .7000 надо написать  2fr 1fr */
  grid-template-rows: 1fr 1fr; /* не очень наглядно. чтобы сделать .49000 в 2/5 ширины враппера, а .5000 и .7000 3/5 ширины враппер, надо написать  2fr 3fr */
  grid-template-areas: 
    "a b"
    "a c";
  justify-items: stretch;
  align-items: stretch;
  align-content: stretch;
}

.49000 {
  grid-area: a;
}

.5000 {
  grid-area: b;
}

.7000 {
  grid-area: c;
}
3
  • Где-то здесь должен быть флексбокс. 23 авг 2018 в 8:25
  • Кому должен то?
    – muturgan
    23 авг 2018 в 8:49
  • Если не жонглировать словами, то это было условие автора вопроса, которое он явно указал как в теле вопроса, так и в тегах к нему. 23 авг 2018 в 8:51

Ваш ответ

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

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