flex对齐
flex对齐方式与主轴和交叉轴所在的方向有关,而flex-direction是控制方向的。
主轴 justify-content
justify-content对齐方式共有5种对齐方式：
flex-start ：主轴起点边缘开始，从左向右。
flex-end ：主轴终点边缘开始，从右向左。
center ：主轴中间开始，向两端伸缩。
space-between：主轴两端对齐。
space-around ： 与space-between区别就是起始端与结束端间隔相等。
交叉轴： align-content
align-content对齐方式共有6种。除了与justify-content前5种方式一样外，多了一种stretch对齐方式。
stretch：各行将会伸展以占用剩余的空间。如果剩余的空间是负数，该值等效于'flex-start'。在其它情况下，剩余空间被所有行平分，以扩大它们的侧轴尺寸。
align-items
用于单行/单列对齐，沿主轴方向对齐。
flex-start ：主轴起点。
flex-end ：主轴终点。
center：主轴中间。
stretch ： 拉伸。
baseline：基线对齐。
自身对齐方式：align-self
用于单行（或单列），沿交叉轴方向对齐。
flex-start ：交叉轴起点。
flex-end ：交叉轴终点。
center：交叉轴中间。
stretch ： 拉伸。
baseline：基线对齐。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0px; } .box{ width: 50px; height: 50px; } .flexbox-row{ margin: 50px auto; display: flex; flex-direction: row; width: 120px; height: 320px; border: 1px #ccc solid; flex-wrap: wrap; /** 左上角 justify-content: flex-start; align-content: flex-start; 左下角 justify-content: flex-start; align-content: flex-end; 右上角 justify-content: flex-end; align-content: flex-start; */ justify-content: flex-end; align-content: flex-end; } </style> </head> <body> <div class="flexbox-row"> <div class="box" style="background-color:coral;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box" style="background-color:khaki;">C</div> <div class="box" style="background-color:pink;align-self: flex-start;">D</div> <div class="box" style="background-color:lightgrey;">E</div> <div class="box" style="background-color:lightgreen;">F</div> </div> <script> </script> </body> </html>