<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css弹性盒骰子</title> <style> * { margin: 0; padding: 0 } div { width: 200px; height: 200px; border: 1px solid #000; background: #ff0; float: left; display: flex; box-sizing: border-box; } span { display: block; width: 50px; height: 50px; background: #f00; border-radius: 50%; } div:nth-of-type(1) { justify-content: center; align-items: center; } div:nth-of-type(2) { justify-content: space-around; align-items: center; } div:nth-of-type(3) { justify-content: space-between; align-items: center; padding: 10px; } div:nth-of-type(3) > span:nth-of-type(1) { align-self: flex-start; } div:nth-of-type(3) > span:nth-of-type(3) { align-self: flex-end; } div:nth-of-type(4) { justify-content: center; align-items: center; flex-wrap: wrap; } nav { width: 100%; height: 50px; display: flex; justify-content: space-around; } div:nth-of-type(5) { justify-content: center; align-items: center; flex-wrap: wrap; } div:nth-of-type(6) { justify-content: center; align-items: center; flex-wrap: wrap; } </style> </head> <body> <div> <span></span> </div> <div> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> </div> <div> <nav> <span></span> <span></span> </nav> <nav> <span></span> <span></span> </nav> </div> <div> <nav> <span></span> <span></span> </nav> <nav> <span></span> </nav> <nav> <span></span> <span></span> </nav> </div> <div> <nav> <span></span> <span></span> </nav> <nav> <span></span> <span></span> </nav> <nav> <span></span> <span></span> </nav> </div> </body> </html>
