css - 使用flex怎么實(shí)現(xiàn)這種布局？
問題描述
使用flex怎么實(shí)現(xiàn)這種布局，我寫到第三個(gè)寫不下去了求大神補(bǔ)充。
<p class='pic'> <p class='pic1'></p> <p class='pic2'></p> <p class='pic3'></p> <p class='pic4'></p></p><style> .pic{display: flex;width: 400px;height: 400px;margin: 100px auto;flex-wrap: wrap; } .pic1{flex: 1;height: 100%;background-color: pink; } .pic2{flex: 1;height: 50%;background: #C81623; } .pic3{/*width: 25%;*//*float: left;*//*height: 50%;*//*background-color: green;*/ } ...
問題解答
回答1：大概就像下面這樣
<!DOCTYPE html><html><head> <meta charset='utf-8'> <title></title> <style media='screen'>#main { display: flex; height: 500px;}#left { width: 200px; background: red;}#right-box { display: flex; flex-direction: column; background: blue; flex: 1;}#right-top { height: 200px; background: yellow;}#right-bottom-box { display: flex; flex: 1;}#bottom-left { width: 50%; background: pink;}#bottom-right { width: 50%; background: magenta;} </style></head><body> <p id='main'><p id='left'></p><p id='right-box'> <p id='right-top'></p> <p id='right-bottom-box'><p id='bottom-left'></p><p id='bottom-right'></p> </p></p> </p></body></html>
效果
.flex-box { display: flex;}.flex-1 { flex: 1;}.flex-2 { flex: 2;}.flex-3 { flex: 3;}
<p class='flex-box'> <p class='flex-2'>pic</p> <p class='flex-3'> <p>pic</p> <p class='flex-box'> <p class='flex-1'>pic</p> <p class='flex-1'>pic</p> </p> </p></p>
相關(guān)文章：
1. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題2. javascript - QWebEngineView 如何爬 angular 的動(dòng)態(tài)數(shù)據(jù)？3. javascript - 使用angular 的ui-sref 中出現(xiàn)了中文參數(shù)，點(diǎn)擊跳轉(zhuǎn)后瀏覽器的地址欄里出現(xiàn)轉(zhuǎn)義后的%AE....%a%44. java - ConcurrentHashMap中的get()方法為什么可以不加鎖？5. java - 郵箱如何發(fā)送html內(nèi)容6. html5 - 這個(gè)代碼顯示功能如何實(shí)現(xiàn)？7. javascript - 用JS 七牛上傳圖片出現(xiàn)文件已存在的錯(cuò)誤（file exists）8. 工作近5年，3年Java Web ，近2年前端，未來何去何從？9. css3 - 圖片等比例縮放10. java - 字節(jié)流轉(zhuǎn)成字符串之后，在通過字符串轉(zhuǎn)成字節(jié)流后的文件為什么會(huì)不一樣？
網(wǎng)公網(wǎng)安備