Flex позиционирование блоков

175

16 ноября 2018, 02:50

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

*, 
*::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>

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

Answer 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>

Answer 2

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;
}

Answer 3

Попробуй так

.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>

Answer 4

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;
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

ошибка в сафари decodeAudioData

Есть функиця декодирования аудиофайла

175

javascript

Как отображать нужные мне компоненты

Есть компонент TaskList в нем отрисовывается несколько TaskЗадача - отрисовывать по клику разные обьекты массива

158

javascript

Альтернатива кода JQuery на чистом JavaScript

ЗдравстуйтеЕсть рабочий скрипт написанный на JQuery высветляющий значение "No Results" при введении в input несуществующего значения в таблице("Живой...

177

javascript

JS/JQUERY складывать все теги li и сделать средняю арифметику

надо с помощью js делать вот такую операцию (45+100+56+23)/4

173