>[danger]css完成如下效果 ----  >[warning]彈性布局 --- ~~~ <style> .father{ border: 1px solid black; width: 300px; height: 300px; display: flex; flex-direction: column; } .father div{ width: 100px; height: 100px; background-color: blue; } .my_1{ align-self:center; /*縱軸方向對齊方式, 會受flex-direction影響*/ } .my_2{ align-self:flex-start; } .my_3{ align-self:flex-end; } </style> <div class="father"> <div class="my_1"></div> <div class="my_2"></div> <div class="my_3"></div> </div> ~~~ >[warning]網格布局 --- ~~~ <style> .container{ display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto auto; grid-template-areas: ". center ." "left . ." ". . right"; width: 300px; height: 300px; border: 1px solid black; } .container div{ width: 100px; height: 100px; background-color: blue; } .item-1{ grid-area: center; } .item-2{ grid-area: left; } .item-3{ grid-area: right; } </style> <div class="container"> <div class="item-1"></div> <div class="item-2"></div> <div class="item-3"></div> </div> ~~~