flex佈局：justify-content、aign-content、align-items
阿新 • • 發佈：2019-01-22
1.justify-content：彈性盒子在主軸方向上的排列方式，例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style type="text/css"> .flex-box { display: flex; justify-content: space-around; // 主軸方向如何排列 align-content: space-around; // 側軸方向如何排列，多行無效 align-items: center; // 側軸方向如何排列，多行有效 width: 500px; height: 500px; flex-wrap: wrap; border: 1px solid blue; } .item { width: 100px; height: 200px; border: 1px solid red; } </style> </head> <body> <div class="flex-box"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body> </html>
justify-content: space-around
align-content: center
align-items: center