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 beginning
  • center pushes all elements to the centre
  • space-around spreads out elements, putting space before and after each one
  • space-between spreads out elements, with the first pushed to the beginning and the last pushed to the end
  • flex-end pushes all elements to the end

Note:

Hints:

  • undefined
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
<!DOCTYPE html>
<html lang="en">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
p {
    width2rem;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX