schematu flexbox: Dwa elementy na górze siebie w giętkim kierunku: rząd

Question

staram się osiągnąć następujące:

---

Moja pierwsza próba była w użyciu div pomocnika (zielony) :

JSFiddle

Co mogę tutaj zrobić, to używanie JavaScriptu do przenoszenia uczennic i pomarańczowych elementów z pomocnika na ekranach urządzeń mobilnych. Ale musi być zwykły sposób css.

---

Moja druga próba była usunąć pomocnika i budować Mobile układ:

JSFiddle

---

Czy istnieje sposób, aby umieścić dwa elementy na górze siebie nawzajem w flex-direction: row? (second attempt)

Answer 1

Można to zrobić z Flexbox, ale trzeba użyć stałego height na elastycznym pojemniku. Oto Fiddle Zasadniczo używasz flex-wrap: wrap z flex-direction: column i sprawiasz, że pierwszy element przyjmuje 100% wysokości i ustawia width w%. Następnie zmieniasz zamówienie za pomocą zapytań o media i wysokości.

* { 
 
    box-sizing: border-box; 
 
} 
 
main, 
 
div { 
 
    display: flex; 
 
    padding: 1rem; 
 
} 
 
.desktop { 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 400px; 
 
    width: 100%; 
 
} 
 
div { 
 
    flex: 1; 
 
    width: 30%; 
 
} 
 
[orange] { 
 
    background-color: #FFAD77; 
 
    flex: 0 0 70%; 
 
} 
 
[yellow] { 
 
    background-color: #FFE377; 
 
    flex: 0 0 100%; 
 
    width: 70%; 
 
} 
 
[purple] { 
 
    background-color: #FF77C8; 
 
} 
 
@media(max-width: 480px) { 
 
    .desktop div { 
 
    flex: 1; 
 
    width: 100%; 
 
    } 
 
    div[orange] { 
 
    order: -1; 
 
    flex: 2; 
 
    } 
 
    div[yellow] { 
 
    flex: 5; 
 
    } 
 
    div[purple] { 
 
    flex: 1; 
 
    } 
 
}

<div class="desktop"> 
 
    <div yellow>lorem</div> 
 
    <div orange>lorem</div> 
 
    <div purple>lorem</div> 
 
</div>

Answer 2

Nie, ale alternatywą nie jest śmiertelna. Jeśli użyjesz pozycjonowania bezwzględnego, będziesz mieć o wiele większą kontrolę nad układem na różnych rozmiarach ekranu.

function toggleLayout() { 
 
    document.querySelector('main').classList.toggle('mobile'); 
 
}

main { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 400px; 
 
} 
 

 
main div { 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 0; right: 0; 
 
} 
 

 
main.mobile div { 
 
    position: static; 
 
    width: 100%; 
 
    height: 33.3%; 
 
} 
 

 
[orange] { 
 
    background-color: #FFAD77; 
 
    bottom: 40%; 
 
    left: 66.6%; 
 
} 
 

 
[yellow] { 
 
    background-color: #FFE377; 
 
    right: 33.3%; 
 
} 
 

 
[purple] { 
 
    background-color: #FF77C8; 
 
    top: 60%; 
 
    left: 66.6%; 
 
}

<main> 
 
    <div orange></div> 
 
    <div yellow></div> 
 
    <div purple></div> 
 
</main> 
 
<button onclick="toggleLayout()">toggleLayout</button>

Answer 3

Problemem jest to, że jeśli używasz otoki pomocnika, wtedy będzie tylko w stanie uporządkować elementy wewnątrz niego, ale nie mieszać je ze swoich wujków.

A jeśli nie używasz opakowania pomocnika, potrzebujesz układu kolumn. Jedynym szeroko obsługiwanym sposobem łamania kolumn jest przypisywanie wysokości do linii contaner, jak zasugerował Nenad Vracar. Ale czasami nie możesz tego zrobić.

będę sugerować dwie lepszych alternatyw, ale mają słabe wsparcie (w zasadzie, Firefox):

• Użyj owijkę pomocnika na pulpicie i pozbyć się go z display: contents w mobile

  document.querySelector('button').addEventListener('click', function() { 
   
      document.querySelector('main').classList.toggle('mobile'); 
   
  });

  main { 
   
      display: flex; 
   
      width: 600px; 
   
      height: 400px; 
   
  } 
   
  .wrapper { 
   
      display: flex; 
   
      flex-direction: column; 
   
  } 
   
  div { 
   
      flex: 1; 
   
  } 
   
  [data-color=orange] { 
   
      background-color: #FFAD77; 
   
  } 
   
  [data-color=yellow] { 
   
      background-color: #FFE377; 
   
  } 
   
  [data-color=purple] { 
   
      background-color: #FF77C8; 
   
      order: 3; 
   
  } 
   
  main.mobile { 
   
      flex-direction: column; 
   
  } 
   
  main.mobile .wrapper { 
   
      display: contents; 
   
  } 
   
  main.mobile [data-color=orange] { 
   
      order: -1; 
   
  }

  <main> 
   
      <div data-color="yellow"></div> 
   
      <div class="wrapper"> 
   
      <div data-color="orange"></div> 
   
      <div data-color="purple"></div> 
   
      </div> 
   
  </main> 
   
  <button>toggleLayout</button>

• Zastosowanie zmuszony podziały wiersza

  document.querySelector('button').addEventListener('click', function() { 
   
      document.querySelector('main').classList.toggle('mobile'); 
   
  });

  main { 
   
      display: flex; 
   
      flex-flow: column wrap; 
   
      width: 600px; 
   
      height: 400px; 
   
  } 
   
  div { 
   
      flex: 1; 
   
  } 
   
  [data-color=orange] { 
   
      background-color: #FFAD77; 
   
      page-break-after: always; 
   
      break-after: always; 
   
  } 
   
  [data-color=yellow] { 
   
      background-color: #FFE377; 
   
  } 
   
  [data-color=purple] { 
   
      background-color: #FF77C8; 
   
      order: 3; 
   
  } 
   
  main.mobile { 
   
      flex-wrap: nowrap; 
   
  } 
   
  main.mobile [data-color=orange] { 
   
      order: -1; 
   
  }

  <main> 
   
      <div data-color="yellow"></div> 
   
      <div data-color="orange"></div> 
   
      <div data-color="purple"></div> 
   
  </main> 
   
  <button>toggleLayout</button>