Новое в Flexbox - что мне нужно делать?

Question

В коде есть три элемента div, которые упорядочены в dom по div-00 #

. То, что я хотел бы создать с помощью flexbox (для ширины> = 460 пикселей), представляет собой следующий макет (см. Изображения)
Добавлено: 18-12-16 - Кто-нибудь может подсказать, как это сделать с помощью flexbox?

ЕстьВторая проблема с порядком вкладок, но была бы признательна за сортировку макета.

ON MOBILE (скажем, <460px) - в пределах .div-main: <br>Все элементы div являются 100% родительского элемента div, упорядочены .div-001 -div-002 .div-003.

ON DESKTOP (скажем,> = 460px) - в пределах .div-main:
Из-за разной высоты я не использую поплавки, как это происходит на рабочем столе .

.div-001 - Положение: вверху справа.Высота: варьируется.Ширина: 20%.В идеале индекс табуляции должен быть равен 2 (поэтому я использовал flex, чтобы упорядочить это '2'), но знайте, что порядок считывается по порядку DOM.

.div-002 - Позиция:Верхний левый.Высота: варьируется.Ширина: 80%.В идеале индекс табуляции должен быть 1 (поэтому я использовал flex, чтобы упорядочить это '1')

.div-003 - Позиция: справа (непосредственно под .div-003).Высота: варьируется.Ширина: 20%.В идеале индекс табуляции должен быть равен 3 (поэтому я использовал flex, чтобы упорядочить это '3')

Порядок (на случай, если вам интересно) важен.

* {
  margin: 0;
  padding: 0;
  border: 0;
}
a:focus,
 a:hover {
  color: red;
}
.header,
.footer {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  background: #000;
}
.header {
  height: 50px;
}
.footer {
  height: 20px;
}
.div-main {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
}
.div-main > div { 
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid #f00;
  padding: 10px;
}
@media all and (min-width: 460px) {
  .div-main {
    display: flex;
    flex-direction: column;
  }
  .div-desktop-left {
    width: 80%;
    margin-right: auto;
  }
  .div-desktop-right {
    width: 20%;
    margin-left: auto;
  }
  .div-001 {
    /* example */
    height: 70px;
    order: 2;
  }
  .div-002 {
    /* example (varying height) */
    align-self: flex-start;
    /* smaller than .div-001 */
    height: 50px;
    /* bigger than .div-001 */
    /* height: 360px; */
    order: 1;
  }
  .div-003 {
    /* example */
    height: 20px;
    order: 3;
  }
}

<header class="header"></header>
<div class="div-main">
  <div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001"><a href="#">Desktop link 002</a></div>
  <div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001"><a href="#">Desktop link 001</a></div>
  <div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002"><a href="#">Desktop link 003</a></div>
</div>
<footer class="footer"></footer>

Answer 1

Проблема заключается в том, чтобы дать .div-main столбец flex-direction:, делая так, что .div-desktop-left и .div-desktop-right не будут совмещаться рядом друг с другом. То, что вам нужно изменить, это дать .div-main flex-direction: row и flex-wrap: wrap, и это решит проблему

* {
  margin: 0;
  padding: 0;
  border: 0;
}
a:focus,
 a:hover {
  color: red;
}
.header,
.footer {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  background: #000;
}
.header {
  height: 50px;
}
.footer {
  height: 20px;
}
.div-main {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
}
.div-main > div { 
  min-height: 50px;
  box-sizing: border-box;
  border: 1px solid #f00;
  padding: 10px;
}
@media all and (min-width: 460px) {
  .div-main {
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
  }
  .div-desktop-left {
    width: 80%;
    margin-right: auto;
  }
  .div-desktop-right {
    width: 20%;
    margin-left: auto;
  }
  .div-001 {
    /* example */
    height: 70px;
    order: 2;
  }
  .div-002 {
    /* example */
    align-self: flex-start;
    height: 50px;
    order: 1;
  }
  .div-003 {
    /* example */
    height: 20px;
    order: 3;
  }
}

<header class="header"></header>
<div class="div-main">
  <div class="div-001 div-mobile-001 div-desktop-002 div-desktop-right div-desktop-right-001"><a href="#">Desktop link 002</a></div>
  <div class="div-002 div-mobile-002 div-desktop-001 div-desktop-left div-desktop-left-001"><a href="#">Desktop link 001</a></div>
  <div class="div-003 div-mobile-003 div-desktop-003 div-desktop-right div-desktop-right-002"><a href="#">Desktop link 003</a></div>
</div>
<footer class="footer"></footer>

Answer 2

Не могу разобраться с помощью flexbox,

Вот решение с использованием CSS Grid, если вы не ограничены технологиями:

HTML

body {
  margin: 0;
  padding: 0;
}
main {
  display: grid;
  grid-template-columns: 3fr 1fr;
  height: 300px;
  
}

.box {
  border: 5px solid red;
  padding: 50px;
  
  
}

.box.three {
  grid-column: 2;
}

@media (max-width: 460px) {
  main {
    display: flex;
    flex-flow: column;
  }
  .box {
    border-color: black;
 
}

<!DOCTYPE html>
        <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Flexer</title>
        </head>
        <body>
          <main>
            <div class="box one">one</div>
            <div class="box two">two</div>
            <div class="box three">three</div>
          </main>
        </body>
        </html>