Позиционирование flexbox

378

13 января 2017, 07:49

День добрый! Есть такая html конструкция

<div class="special">
    <div class="special__block-left">
        <a href="#"><img src="img/left.jpg" alt="left"></a>
    </div>
    <div class="special__block-center">
        <div class="special__block-center-top">
            <h1>Text</h1>
            <a href="#">Button</a>
        </div>
        <div class="special__block-center-bottom">
            <h1>Text</h1>
            <a href="#">Button</a>
        </div>
    </div>
    <div class="special__block-right">
        <a href="#"><img src="img/right.jpg" alt="right"></a>
    </div>
</div>

Как с помощью flexbox их позиционировать так, как на картинке ниже (извиняюсь за свои навыки Paint) на десктопе, планшете и мобильных устройствах? 1 и 4 блоки - изображения, 2 и 3 - текст с кнопкой, блок закрашен. Размеры одинковы 1 и 4, а также 2 и 3 блока (еще раз извиняюсь за Paint). Спасибо за помощь!

Answer 1

Да можно.

В разметке расположить (1 2 (3 4)).

Для телефона. Всему display: block и оно само встанет.

Для остальных. Горизонтальный флексбокс.

Для планшета. Для контейнера 3 и 4 выставить flex: 0 0 100%, для общего контейнера разрешить перенос. Для самих 3 и 4 ширину по 50% любым способом.

Для десктопа. Переупорядочить элементы используя свойство order.

Лейаут выбирать на основе min-width, не перепутать порядок media-запросов (если они ограничивают ширину только с одного конца, то распространяются и на больший размер).

Answer 2

html,  
body { 
  width: 100%; 
  height: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
.wrapper { 
  display: flex; 
  flex-direction: column; 
  flex-wrap: wrap; 
  justify-content: space-around; 
  align-items: center; 
  border: 2px solid #000; 
  background-color: #fff; 
} 
 
.block { 
  background-color: #f00; 
  width: 200px; 
  text-align: center; 
  font-size: 35px; 
  font-weight: bold; 
  color: #fff; 
} 
 
.vblock { 
  height: 300px; 
  line-height: 300px; 
} 
 
.hblock { 
  height: 140px; 
  line-height: 140px; 
} 
 
@media screen and (min-width: 674px) { 
  .wrapper { 
    width: 670px; 
    height: 320px; 
  } 
   
  .block:nth-child(1) { 
    order: 0; 
  } 
   
  .block:nth-child(2) { 
    order: 3; 
  } 
   
  .block:nth-child(3) { 
    order: 1; 
  } 
   
  .block:nth-child(4) { 
    order: 2; 
  } 
} 
 
@media screen and (min-width: 225px) and (max-width: 673px) { 
  .wrapper { 
    width: 500px; 
    height: 480px; 
  } 
   
  .block:nth-child(1) { 
    order: 0; 
  } 
   
  .block:nth-child(2) { 
    order: 2; 
  } 
   
  .block:nth-child(3) { 
    order: 1; 
  } 
   
  .block:nth-child(4) { 
    order: 4; 
  } 
} 
 
@media screen and (max-width: 224px) { 
  .wrapper { 
    width: 220px; 
    height: 960px; 
  } 
   
  .block:nth-child(1) { 
    order: 0; 
  } 
   
  .block:nth-child(2) { 
    order: 1; 
  } 
   
  .block:nth-child(3) { 
    order: 2; 
  } 
   
  .block:nth-child(4) { 
    order: 3; 
  } 
}

<div class="wrapper"> 
  <div class="block vblock">1</div> 
  <div class="block vblock">2</div> 
  <div class="block hblock">3</div> 
  <div class="block hblock">4</div> 
</div>

fiddle

Answer 3

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
.container { 
  display: flex; 
} 
.container__inner { 
  display: flex; 
  flex-flow: row wrap; 
} 
.block { 
  padding: 20px; 
  border: 1px solid; 
  text-align: center; 
} 
.block--1, 
.block--2 { 
  min-width: 200px; 
} 
.block--3, 
.block--4 { 
  flex-basis: 100%; 
} 
 
/* tablet */ 
 
@media (max-width: 1024px) { 
  .container { 
    flex-flow: row wrap; 
  } 
   
  .block--1 { 
    order: 0; 
    flex-basis: 50%; 
  } 
   
  .block--2 { 
    order: 1; 
    flex-basis: 50%; 
  } 
   
  .container__inner { 
    order: 2; 
    flex-grow: 1; 
  } 
   
  .block--3, 
  .block--4 { 
    flex-grow: 1; 
  } 
} 
 
 
/* mobile */ 
 
@media (max-width: 560px) { 
  .block--1, 
  .block--2, 
  .block--3, 
  .block--4 { 
    flex-basis: 100%; 
  } 
   
  .container__inner { 
    flex-flow: row wrap; 
  } 
}

<div class="container"> 
  <div class="block block--1">1</div> 
  <div class="container__inner"> 
    <div class="block block--3">3</div> 
    <div class="block block--4">4</div> 
  </div> 
  <div class="block block--2">2</div> 
</div>

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

Все вопросы

ТОП-10

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

Перенос строки textarea в ipad(safari)

Не работает перенос строки в textarea в ipad(safari), по-разному пробовал

340

HTML

Умножение выбора селекта и данных из инпута

Ребята, подскажите пожалуйста как реализовать такую вещь, есть 1 селект и 1 инпут туда number, при выборе чего то из селекта и ввода числа в инпут,...

450

HTML

Выборка из нескольких таблиц mysql на php

Привет всем! :-)

365

HTML

Начать работу верстальщика [требует правки]

Подскажите, что нужно знать, для того чтобы начать работать (заработать на хлеб) верстальщиком? 1) Имеется ввиду, какие технологии и тому подобное2)...

318