Von b_funke |

HTML

<div class="flex-container">
 <div><img src="bilder/skyline.webp" alt="Frankfurter Skyline"/></div>
 <div><img src="bilder/ezb.webp" alt="Europäische Zentralbank"/></div>
 <div><img src="bilder/enkheimer_ried.webp" alt="Enheimer Ried"/></div>  
 <div><img src="bilder/lohrberg.webp" alt="Weinberg am Frankfurter Lohrberg"/></div>
 <div><img src="bilder/klappergasse.webp" alt="Klappergasse"/></div>
 
CSS
 

.flex-container {
 display: flex;
 flex-wrap: wrap;
 }

/*fliex-wrap:nowrap erzwingt eine Zeile*/

 

.flex-container > div {
 width: 200px;
 margin: 10px;
 text-align: center;
 }
 
 .flex-container > div img
  {width:80%;}