-
Create a flex container:
.container { display: flex; }
-
Use
justify-content
to control how items are horizontally positioned (when inrow
direction):.container { justify-content: center; }
-
Flexbox alignment (up-down when in the
row
direction) defaults tostretch
, which breaks image aspect ratio. Usealign-items
to centre the items instead:.container { align-items: center; }
Simple html page header
:
<header class="container">
<img src="https://picsum.photos/id/237/150" alt="Puppy logo">
<h1>Lucifer: The Demon Puppy</h1>
</header>
img
and h1
are the Flex items.
- HTML:
- CSS Selectors:
- Flexbox:
- MDN: Flexbox basics
- MDN: justify-content
- MDN: align-items
- Reference: Complete Guide to Flexbox