css3 - 如圖的flex骰子布局是怎么實現的?
問題描述
看了阮一峰大神的博客是如下寫的,可是怎么都沒有效果
<p class='box'> <span class='item'></span> <span class='item'></span></p>.box { display: flex;}.item:nth-child(2) { align-self: center;}只能是如下的效果
問題解答
回答1:他的這個例子沒寫對,他頁面上還有其他一些例子是錯的
可以再增加第三個 item ,背景設為透明來隱藏然后 box 設置 justify-content: space-between
回答2:body{ background: rgb(44, 44, 44)} .box { display: flex; width: 200px; height: 200px; background: rgb(225,225,225); border-radius:10px; border:outset white 10px;}.item{ width: 30%; height: 30%; background: rgb(44, 44, 44); border-radius: 50%;}.item:nth-child(1) { margin: 5px } .item:nth-child(2) { align-self: center;}回答3:
樣式沒加,哥們
相關文章:
1. docker - 如何修改運行中容器的配置2. nignx - docker內nginx 80端口被占用3. python3.x - python連oanda的模擬交易api獲取json問題第五問4. java - SSH框架中寫分頁時service層中不能注入分頁類5. 為什么我ping不通我的docker容器呢???6. 關于docker下的nginx壓力測試7. 域名解析在Ubuntu64 9.04計算機上的Java應用程序中不起作用所有其他軟件可以正確解析DNS8. javascript - js代碼獲取驗證碼倒計時問題9. docker-machine添加一個已有的docker主機問題10. angular.js - angular內容過長展開收起效果
