Using the justify-content property
The justify-content property (justify-content
) aligns elements on the main axis, with the options for values being as follows:
flex-start
(default) pushes all elements to the beginningcenter
pushes all elements to the centrespace-around
spreads out elements, putting space before and after each onespace-between
spreads out elements, with the first pushed to the beginning and the last pushed to the endflex-end
pushes all elements to the end
Note:
Hints:
- undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
p {
width: 2rem;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX