Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Challenge: Work with Flexbox | Flexbox
CSS Fundamentals

book
Challenge: Work with Flexbox

Task

Let's create a blog card. We need to change the default positioning behavior with the help of flex.

The task is to:

  • Identify the parent element containing both the post image (img tag with the post-image class name) and post information (div tag with the post-info class name).

  • Apply flex properties to the parent element (div tag with the blog-card class name).

  • Horizontally center the items within the card.

  • Ensure that items cover the entire height of the card.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="blog-card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/flexbox/spaceship.png"
width="200px"
alt="Post Image"
class="post-image"
/>
<div class="post-info">
<h3 class="post-title">Spacecraft</h3>
<p class="post-meta">Posted on January 1, 2023 by Peter Keygen</p>
<p class="post-excerpt">Space vehicle for colonization</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</body>
</html>

  • display: flex; can only be applied to the parent element.

  • The default flex direction is row, so we need to change it using the flex-direction: column; property.

  • To center items horizontally, use align-items: center;.

  • To space items vertically, use justify-content: space-between;.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="blog-card">
<img
src="https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/flexbox/spaceship.png"
width="200px"
alt="Post Image"
class="post-image"
/>
<div class="post-info">
<h3 class="post-title">Spacecraft</h3>
<p class="post-meta">Posted on January 1, 2023 by Peter Keygen</p>
<p class="post-excerpt">Space vehicle for colonization</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</body>
</html>

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 7

Chieda ad AI

expand
ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

some-alt