容器屬性:
左右對齊方式：justify-content:flex-start/flex-end/center/space-between/space-around;
上下對齊方式：align-items:flex-start/flex-end/center/baseline/stretch
其中，baseline/stretch是用於存在內容的時候，基線對齊，伸展。
項目屬性：
align-self:flex-start/flex-end/flex-center;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ display:flex; display:-webkit-flex; /*flex-direction:row;*//*默認*/ /*-webkit-flex-direction:row;*/ justify-content:center;/*子元素居中對齊*/ /*align-items:center;!*在400的高度中豎向對齊*!*/ height:400px; border:5px solid red; } .container .ch{width:200px;height:200px;border:10px solid green;color:green;} .ch:nth-child(1){ align-self:flex-start;/*默認default*/ } .ch:nth-child(2){ align-self:flex-end; } .ch:nth-child(3){ align-self:center; } </style> </head> <body> <h1 style="color:red;"> .container{display:flex;display:-webkit-flex;justify-content:center;} </h1> <div class="container"><!--注意container要有高度。子元素的align-self才有意義。--> <div class="ch">align-self:flex-start</div> <div class="ch">align-self:flex-end</div> <div class="ch">align-self:flex-center</div> </div> </body> </html>