面試中遇到個樣式題，就是用flex實現三個長寬相同div的布局，第一個在左上角，第二個水平垂直居中，第三個在右下角
開始還以為要用上中下三個父節點分別包住三個小div，分別設置三個父節點的justify-content屬性為flex-start、center、flex-end，再設置align-items屬性為flex-start、center、flex-end來實現
后來發現，還有更快的方法，就是
1 <html> 2 <body> 3 <div class="content"> 4 <div class="d1">div1</div> 5 <div class="d2">div2</div> 6 <div class="d3">div3</div> 7 </div> 8 </body> 9 <style> 10 .content{ 11 display: flex; 12 justify-content: space-between; 13 align-items: center; 14 height: 100%; 15 } 16 .d1,.d2,.d3{ 17 height: 100px; 18 width: 100px; 19 } 20 .d1{ 21 background-color: aquamarine; 22 align-self:flex-start; 23 } 24 .d2{ 25 background-color: coral 26 } 27 .d3{ 28 background-color: cornflowerblue; 29 align-self:flex-end; 30 } 31 </style> 32 </html>
解析：
1.把最外層的父節點的justify-content屬性設為space-between，三個div就會平均分布在左中右。
2.把父節點的align-items屬性設為center，讓三個div都垂直居中。
3.單獨設置第一個和第二個div的align-self屬性，把第一個設為flex-start，第三個設為flex-end，就完美實現了
效果如下圖：
原創，轉載請注明出處