Theory
Theory
Comments

The vertical row of icons, part 2

A flex item inside a flex container can also be made into its own flex container.

It will also behave like a flex item itself, meaning, in other words, that it will obey the arrangement and alignment rules that have been assigned to its parent, and it will also act like an independent flex container. At the same time, its first-level nest items will only follow its flex rules.

In our example, let’s create a block with social network icons as an embedded flex container, and then let’s arrange its child flex items along the entire height of the block.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The vertical row of icons, part 2</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <div class="post"> <section> <h1>A Day in the Life of a Cat</h1> <p>Muffin woke on up in his cat bed very early that morning. The day promised to be eventful.</p> <p>Due to this, he decided to work out on his chin-up bar.</p> <p>The cat eventually tired himself out exercising, and he decided to relax a bit and watch TV.</p> </section> <aside> <a href="#" class="soc-icon soc-icon-fb">fb</a> <a href="#" class="soc-icon soc-icon-tw">tw</a> <a href="#" class="soc-icon soc-icon-yo">yo</a> </aside> </div> </body> </html>

CSS

.post { display: flex; } .post aside { order: -1; }

Goalscompleted

Assign a flexbox layout to the .post aside block,
align the main axis from top to bottom,
ensure the arrangement of flex items along the main axis without margins along the edges,
and then assign a right margin of 20px.

The vertical row of icons, part 2

Comments

Log in

Sign up

Restore access