This is because they are not direct children of the div that has been set to flex. Notice that the list items still stack on top of one another. We can apply display: flex to the parent div, and its direct children are automatically arranged in a left-justified horizontal line, according to flexbox defaults:

If we start with a series of elements within a shared parent:

They aren't responsible for grandchildren or other decendants. Parents keep their children in line (pun intended). A good mnemonic for remembering that flex properties are applied to the direct parent is: On This Pageįlexbox is activated for a group of elements by applying display: flex to the direct parent of the elements to be placed in a row. You may want to research more advanced properties and techniques on your own. This article only covers the very basics of flexbox. Flexbox HTML and CSS Guidebook Icon HTML & CSS Guidebook Flexboxįlexbox is a powerful, flexible CSS system for arranging items in a single line / along a single axis.

Display flex align items