• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Flexbox filmy

VPS Starter Arubacloud
+1 głos
331 wizyt
pytanie zadane 6 stycznia 2021 w HTML i CSS przez AgentTecza Obywatel (1,810 p.)

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

2 odpowiedzi

0 głosów
odpowiedź 6 stycznia 2021 przez niezalogowany
#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 

komentarz 6 stycznia 2021 przez AgentTecza Obywatel (1,810 p.)
jak odpaliłem to na swoim codepenie to nadal nie działa mi to w taki sposób tylko robi się kolumna w dół
komentarz 6 stycznia 2021 przez niezalogowany
* {
  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.

komentarz 6 stycznia 2021 przez AgentTecza Obywatel (1,810 p.)
Dzięki działa!
komentarz 6 stycznia 2021 przez niezalogowany

Nie ma sprawy ! wink

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

komentarz 7 stycznia 2021 przez VBService Ekspert (251,170 p.)
edycja 7 stycznia 2021 przez VBService

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

<iframe width="260" ...

... moim zdaniem codepen działa dobrze wink 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 wink

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


 

0 głosów
odpowiedź 7 stycznia 2021 przez VBService Ekspert (251,170 p.)
edycja 7 stycznia 2021 przez VBService

A może po prostu użyj grid-a wink                                                    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; }

 

1
komentarz 7 stycznia 2021 przez niezalogowany
edycja 7 stycznia 2021

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

Miłego dzionka  Pozdrowionka

Podobne pytania

0 głosów
1 odpowiedź 135 wizyt
pytanie zadane 6 lipca 2020 w HTML i CSS przez gmcode Gaduła (3,120 p.)
0 głosów
0 odpowiedzi 516 wizyt
pytanie zadane 5 lipca 2018 w HTML i CSS przez jakznalezcchlopaka Nowicjusz (120 p.)
0 głosów
2 odpowiedzi 158 wizyt
pytanie zadane 21 kwietnia 2017 w HTML i CSS przez dominik36 Początkujący (480 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...