Theory
Theory
Comments

The vertical row of icons

Let’s use the flexbox layout in still another example.

To start with, let’s create two blocks that follow each other in succession in a row. Then let’s change the order in which they are displayed. Be careful with this technique, because a page’s tab order follows the HTML. Keyboard users who tab through focussable elements such as form fields and links could become confused if the visual order is different from the tab order. If you are moving around elements that don’t contain focussable elements, it won’t cause a problem.

Notice how only direct children, or first level nested items, become flex items inside the flex container.

In our example the .post flex container includes two flex items: section and aside. Blocks inside the flex items behave like normal items. The flex flow does not affect them.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The vertical row of icons</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 { } .post aside { }

Goalscompleted

Assign a flexbox layout to the .post block,
and then assign the sequence number of -1 to the flex item for aside inside .post.

The vertical row of icons

Comments

Log in

Sign up

Restore access