<!DOCTYPE HTML> <html> <head> <title>flexbox-alignment.html</title> <style type = "text/css"> div { border-weight: 10px; border: thick solid; width: 25rem; height: 25rem;} .item { border-color: red; background-color: pink; width: 5rem; height: 5rem ;} .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start;} .container2 { display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-end;} .container3 { display: flex; flex-direction: row; justify-content: center; align-items: center;} .container4 { display: flex; flex-direction: row; justify-content: space-between;} .container5 { display: flex; flex-direction: row; justify-content: space-around;} .container6 { display: flex; flex-direction: row; justify-content: space-evenly; } .container7 { display: flex; flex-direction: row; justify-content: flex-start; align-items: baseline; } .special { font-size: 20pt; } </style> </head> <body> <p>Flex Start</p> <div class = "container"> <div class = "item item-1">Item 1</div> <div class = "item item-2">Item 2</div> <div class = "item item-3">Item 3</div> </div> <p>Flex End</p> <div class = "container2"> <div class = "item item-1">Item 1</div> <div class = "item item-2">Item 2</div> <div class = "item item-3">Item 3</div> </div> <p>Center</p> <div class = "container3"> <div class = "item item-1">Item 1</div> <div class = "item item-2">Item 2</div> <div class = "item item-3">Item 3</div> </div> <p>Space Between</p> <div class = "container4"> <div class = "item item-1">Item 1</div> <div class = "item item-2">Item 2</div> <div class = "item item-3">Item 3</div> </div> <p>Space Around</p> <div class = "container5"> <div class = "item item-1">Item 1</div> <div class = "item item-2">Item 2</div> <div class = "item item-3">Item 3</div> </div> <p>Space Evenly</p> <div class = "container6"> <div class = "item item-1">Item 1</div> <div class = "item item-2">Item 2</div> <div class = "item item-3">Item 3</div> </div> <p>Baseline</p> <div class = "container7"> <div class = "item item-1 special">Item 1</div> <div class = "item item-2">Item 2</div> <div class = "item item-3">Item 3</div> </div> </body> <html>