您的位置：首页 > 其它

flex布局小案例

2018-06-21 18:10 169 查看

版权声明：草原上的雄鹰 https://blog.csdn.net/sinat_36729274/article/details/80764323 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scale=0" /> <title>一个骰子的布局</title> <style> *{ margin:0; padding:0; } body{ display: flex; justify-content: space-around } body> div{ width: 100px; height: 100px; display: flex; border: 1px solid greenyellow; background-color:skyblue; box-sizing: border-box } p{ width: 10px; height: 10px; background-color: rgb(247, 19, 125); border-radius: 50% } .div1 { justify-content: center; align-items: center } .div2{ justify-content: space-around; flex-direction: column; align-items: center; } .div3{ justify-content: space-around; flex-direction: column; align-items: center; padding: 10px; } .div3>p:first-child{ align-self:flex-start; } .div3>p:last-child{ align-self:flex-end; }
</style></head><body> <div class="div1"> <p></p> </div> <div class="div2"> <p></p> <p></p> </div> <div class="div3"> <p></p> <p></p> <p></p> </div></body></html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航