Bilderbox mit Flex
Hallo zusammen,
ich bräuchte mal ein bisschen Hilfe. Ich habe eine Imagebox (imgBX) gebaut, in der nebeneinander 3 Karten (card) angeordnet sein sollen und dann ein Umbruch in die nächste Zeile erfolgen soll. Dort wieder 3 Karten usw. Bei voller Bildschirmbreite sollen box1 und Details nebeneinander angeordnet sein.
Bei Bildschirmbreite 600px und kleiner sind die Karten vertikal angeordnet und die box1 steht über Details.
Meinen bisheriger Versuch habe ich auf Codepen gestellt. Kann mir jemand weiter helfen? Danke!
https://codepen.io/Lupus_III/project/editor/AVmzry
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>My New Pen!</title>
<style>
* {
margin: 0;
padding: 0;
font-family: 'Raleway', sans-serif;
}
body {
background: #f5f5f5;
}
section {
padding: 0.5em;
display: flex;
flex-direction: row;
}
article {
background: red;
color: white;
flex: 8;
padding: 0.5em;
border: solid 1px #000;
margin: 0 .5em;
}
aside {
background: yellow;
color: #000;
flex: 4;
padding: 0.5em;
border: solid 1px #000;
}
.imgBx {
width: 100%;
display: flex;
background: blue;
margin: 0 auto;
}
img {
width: 100px;
}
@media only screen and (min-width: 601px) {
.card {
width:33%;
display: flex;
flex-direction:row;
}
img {
width: 100%;
}
.imgBx{
display:flex;
flex-wrap:wrap;
}
}
.box1 {
background: lightcoral;
padding: 0.8em;
flex: 1;
}
.details {
background: lightgray;
padding: 0.8em;
flex: 1;
}
footer {
width: 100%;
margin: 0 auto;
background: lightgrey;
padding: 2% 2%;
}
@media only screen and (max-width: 600px) {
section {
display: flex;
flex-direction: column;
}
article {
order: 2;
}
aside {
margin: 0 .5em;
order: 1;
}
.card {
display: flex;
flex-direction: column;
}
}
</style>
</head>
<body>
<section>
<article>
<h2>Article</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem consequatur repudiandae quae, praesentium nulla nihil distinctio ducimus! Facilis iste molestias vero, odit aperiam fugit ex suscipit tempora, ipsam officia impedit?</p>
</article>
<aside>
<h2>Aside</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quos autem magni consectetur accusamus ad dolore beatae ex tempore voluptatum unde culpa magnam praesentium qui, hic deserunt eos nisi voluptatem?</p>
</aside>
</section>
<section class=imgBx>
<div class="card">
<div class="box1">
<img src="/image/1.jpg" alt="">
</div>
<div class="details">
<h2>Titel</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="card">
<div class="box1">
<img src="/image/2.jpg" alt="">
</div>
<div class="details">
<h2>Titel</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="card">
<div class="box1">
<img src="/image/3.jpg" alt="">
</div>
<div class="details">
<h2>Titel</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="card">
<div class="box1">
<img src="/image/4.jpg" alt="">
</div>
<div class="details">
<h2>Titel5</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="card">
<div class="box1">
<img src="/image/5.jpg" alt="">
</div>
<div class="details">
<h2>Titel</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="card">
<div class="box1">
<img src="/image/1.jpg" alt="">
</div>
<div class="details">
<h2>Titel</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>
</section>
<footer>
<p>
<a href="tel:+49123456789">Fon +49 123456789</a>
</p>
<p>
<a href="mailto:info@donald.duck.de">Donald Duck</a>
</p>
</footer>
</body>
</html>