Hab gerade mal beim rumspielen ein Problem. Hab da einen snippet gefunden der mir gefiel und in eine Flexbox gesetzt.
Die Card habe ich mittels justify-content: center; ausrichten können Doch bekomme ich das vertikal nicht hin. Ich komme nicht zu einem Ergebnis.
Ich befürchte der gesamte Code ist eher suboptimal.
Vielleicht erbarmt sich einer meiner?
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/styleschart.css" />
<title>Test</title>
</head>
<body>
<section id="test">
<div class="blog-wrapper">
<div class="blog-card">
<div class="card-img">
<img src="img/html.jpg" />
<h1>HTML & CSS</h1>
</div>
<div class="card-text">
<p>
Um nicht geistig ganz einrosteten bleibe ich so gut es geht mit
allen Techniken für Webdesign auf dem Damm. CMS mache ich nicht,
da man mit reinem HTML und CSS immer flexibler ist.
</p>
</div>
</div>
<div class="blog-card">
<div class="card-img">
<img src="img/fischen.jpg" />
<h1>Fischen</h1>
</div>
<div class="card-text">
<p>
Das liebe ich besonders. Mit meiner ständigen Begleiterin raus ans
Wasser und die Natur genießen. Mit etwas Glück gibt es auch was in
die Pfanne oder auf den Grill. Früher ging das übers gesamte Jahr.
Doch heute ist das eher was für die warme Jahreszeit.
</p>
</div>
</div>
<div class="blog-card">
<div class="card-img">
<img src="img/legs.jpg" />
<h1>Kulinarisches</h1>
</div>
<div class="card-text">
<p>
Das ist eine weitere Passion von mir. Es freut mich immer, wenn
ich hochwertige Lebensmittel zu lecker Gerichten verwandeln kann.
Wenn dann noch die Teller ausgeleckt werden. Dann bin ich
glücklich.
</p>
</div>
</div>
</div>
</section>
</body>
</html>Code
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
background-color: blue;
}
#test {
min-height: 100vh;
background-color: darkolivegreen;
/* background-image: url(../images/bg-chart.png); */
}
#test > p {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: fff;
width: 70%;
}
#test > h1 {
font-family: Arial, Helvetica, sans-serif;
color: black;
}
.flex-container {
width: 80%;
padding: 5px;
margin-bottom: 3rem;
display: flex;
flex-direction: row; /* Default */
gap: 1em 2em;
justify-content: center;
align-items: center;
}
.blog-wrapper {
padding: 15px;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
.blog-card {
@include transition(0.3s);
max-width: 300px;
margin: 15px;
background: #fff;
border: gray;
text-align: center;
cursor: pointer;
&:hover {
box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.1);
.card-img {
img {
opacity: 0.8;
}
}
}
.card-img {
position: relative;
text-align: center;
background: gray;
img {
@include transition(0.3s);
max-height: 180px;
width: 100%;
border-bottom: 4px solid gray;
}
&:before {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
/* border-top: solid 10px lawngreen;
border-left: solid 10px transparent;
border-right: solid 10px transparent; */
}
h1 {
position: absolute;
margin: 0;
font-size: 2em;
bottom: 15px;
width: 100%;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
}
}
.card-details {
margin-top: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #3c3c3c;
span {
padding: 0 30px;
i {
margin-right: 5px;
}
}
}
.card-text {
padding: 30px 15px;
font-family: Arial, Helvetica, sans-serif;
line-height: 22px;
}
}
}
@media (max-width: 950px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
justify-content: center;
font-size: 1em;
}
.flex-container {
/* flex-wrap: wrap; */
margin-bottom: 25px;
flex-direction: column;
}
}
