Flex Layout 2
Flexbox arranges items within a container in one direction, either in a Row (horizontal line) or Column (vertical line).
A Flexbox layout can be likened to a bookshelf with multiple books aligned in a row.
In this analogy, the bookshelf is the Flex Container, and the books within the shelf are the Flex Items.
<div class="flex-container">
<div class="flex-item">Book 1</div>
<div class="flex-item">Book 2</div>
<div class="flex-item">Book 3</div>
</div>
Aligning and Spacing in Flexbox
In Flexbox, justify-content
aligns items along the main axis, while align-items
aligns them along the cross axis.
These axes depend on the flex-direction
property.
-
Main axis
: Whenflex-direction
isrow
, the main axis is horizontal. Whenflex-direction
iscolumn
, it's vertical. -
Cross axis
: Whenflex-direction
isrow
, the cross axis is vertical. Whenflex-direction
iscolumn
, it's horizontal.
The gap
property adjusts the spacing between flex items within a flexbox container.
justify-content
This property determines how items are aligned along the main axis of a flex container.
If the flex-direction
is row
, the main axis is horizontal. If it's column
, the main axis is vertical.
Possible values
-
flex-start
: Aligns items at the start of the main axis. Left if horizontal, top if vertical. -
flex-end
: Aligns items at the end of the main axis. Right if horizontal, bottom if vertical. -
center
: Centers items along the main axis. Horizontally center if the axis is horizontal, vertically center if the axis is vertical. -
space-between
: Creates equal space between items. No space at the start or end. -
space-around
: Adds equal space around each item, with half the space at the start and end compared to between items. -
space-evenly
: Distributes equal space between items and at the start/end.
align-items
This property sets how items are aligned along the cross axis of a flex container.
If flex-direction
is row
, the cross axis is vertical. If it's column
, the cross axis is horizontal.
Possible values
-
flex-start
: Aligns items at the start of the cross axis. Top if the main axis is horizontal, left if vertical. -
flex-end
: Aligns items at the end of the cross axis. Bottom if the main axis is horizontal, right if vertical. -
center
: Centers items along the cross axis. Vertically center if the main axis is horizontal, horizontally center if vertical. -
stretch
: Stretches items to fill the container's entire height or width along the cross axis. -
baseline
: Aligns flex items based on their baseline. The baseline typically refers to the bottom of the text within the items.
Want to learn more?
Join CodeFriends Plus membership or enroll in a course to start your journey.