Flexbox filmy

Question

Witam mam problem mam tutaj 4 filmy z youtube i chciałbym je ustawić w taki sposób:

Tylko nie wiem jak zrobić to za pomocą flexboxa mój kod: https://codepen.io/AgentTecza/pen/PoGpwqb
Z góry dziękuje za pomoc

Answer 1

#video{
 margin-top: 50px;
 margin-left: auto;
 margin-right: auto;
 background-color: white;
 display: flex;
 flex-wrap:wrap;
 justify-content: center;
 gap: 1rem;
}

Sprawdzałem i Działa !

Przeładuj CodePen'a!

Pozdrawiam 

Comments

jak odpaliłem to na swoim codepenie to nadal nie działa mi to w taki sposób tylko robi się kolumna w dół

---

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#video {
  margin-top: 50px;
  margin-left: 300px;
  margin-right: 300px;
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

Tym razem bez codpena'a  edytor + liveserver Chrome i Firefox.

---

Dzięki działa!

---

Nie ma sprawy !

Czasem Codepen sprawia psikusy dobrze jest weryfikować na bieżąco w edytorze i kilku przeglądarkach..

---

@AgentTecza, Zmień w Twoim kodzie we wszystkich 4-ech <iframe> width na 

<iframe width="260" ...

... moim zdaniem codepen działa dobrze  zaproponowany css, chyba nie do końca działa jak tego oczekujesz.

Twój pierwszy kod działa, ale tylko pozornie, ciekawe czy się domyślasz, dlaczego tak jest 

#video{
 margin-top: 50px;
 margin-left: auto;
 margin-right: auto;
 background-color: white;
 display: flex;
 flex-wrap:wrap;
 justify-content: center;
 gap: 1rem;
}

 

Answer 2

A może po prostu użyj grid-a                                                     click      ^^           ^^

<section class="video-grid-container">
  <div class="frame_1">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/QNTeq4QdOsQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="frame_2">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/qugY8axtvWY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="frame_3">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/LadpP5XR1aM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
  <div class="frame_4">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/r1ZtMCr0Pr4" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</section>

*, *:before, *:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}
html, body {
  padding: 0;
  margin: 0;
  border: 0;
}
.video-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1em;
  grid-template-areas: "frame_1 frame_2" "frame_3 frame_4";
  
  max-width: 20vw;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-content: center;
}
.frame_1 { grid-area: frame_1; }
.frame_2 { grid-area: frame_2; }
.frame_3 { grid-area: frame_3; }
.frame_4 { grid-area: frame_4; }

 

Comments

Pięknie Jak dobrze jest zobaczyć alternatywę !!! Mógłbyś przedstawić poprawne rozwiązanie według ciebie za pomocą Flexboxa?

Miłego dzionka  Pozdrowionka