Wie zentriere ich eine Flexbox im Browserfenster?

würde Ich mag einen Flexibox in Browser-Fenster zu zentrieren, den Code in den folgenden jsfiddle Arbeiten ohne Zentrierung, wenn die Browser-Bildschirm ändert, wird die Bild- und Textänderung in einer ansprechenden Art und Weise,Wie zentriere ich eine Flexbox im Browserfenster?

Fiddle

<!DOCTYPE html><html lang="en"> <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style> 
    #container { 
    display: flex; 
    /*width: 1400px;*/ 
    margin: auto; 
    } 
    #container .video { 
    border: 5px solid red; 
    width: 750px; 
    max-width: 100%; 
    } 
    #container .desc { 
    background-color: blue; 
    max-width: 100%; 
    } 
    </style> </head> <body> 
    <div id="container"> 
    <div class="video"> 
     <img src="https://futuranexa.files.wordpress.com/2012/09/funny_cow_egg-wallpaper-1920x1080.jpg" 
      style="max-width: 100%"> 
    </div> 
    <div class="learn"> 
     <p> 
      isque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior. 
     <p> 
    </div> 
    </div> </body></html>

Wenn ich die Kommentarzeichen auslasse/Breite: 1400px;/Zeile, die Flexibox ist zentriert, aber das Bild und der Text werden sich nicht reaktiv ändern, wenn sich der Browserbildschirm ändert, irgendein Hinweis? Danke,

Quelle

2016-09-01 AngeloC

Ich glaube, ich verstehe, was Sie für Fragen nach ein paar liest also hier ist, was ich auf der Codierung getan haben:

#container { 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
    margin: auto; 
 
} 
 

 
#container .video { 
 
    border: 5px solid red; 
 
    flex-basis: 50%; 
 
    max-width: 100%; 
 
} 
 

 
#container .desc { 
 
    background-color: blue; 
 
    max-width: 100%; 
 
}

<div id="container"> 
 
    <div class="video"> 
 
     <img src="https://futuranexa.files.wordpress.com/2012/09/funny_cow_egg-wallpaper-1920x1080.jpg" 
 
      style="max-width: 100%"> 
 
    </div> 
 
    <div class="learn"> 
 
     <p> 
 
      isque perfecto dissentiet cum et, sit ut quot mandamus, ut vim tibique splendide instructior. 
 
     <p> 
 
    </div> 
 
</div>

Allgemeinen den Text mittig unterhalb zu machen das Bild hängt von der Größe ab, die Sie verwenden müssen flex-wrap: wrap; Auch sollten Sie immer flex-basis: xyz%; anstelle von width: xyz% verwenden, versuchen Sie es und lassen Sie mich wissen, wenn es das ist, wonach Sie waren.

Quelle

2016-09-01 07:04:55 Option

genau was ich brauche! Danke – AngeloC

Du bist herzlich willkommen :) – Option

noch eine Sache, der Text unter Klasse = "lernen", es geht unter das Bild sofort, gibt es eine Möglichkeit, den Inhalt nur bis zu einer minimalen Breite wordwrap vor dem Bild wird? – AngeloC

Wie zentriere ich eine Flexbox im Browserfenster?

Antwort

Verwandte Themen