css - 使用flex怎么实现这种布局？
问题描述
使用flex怎么实现这种布局，我写到第三个写不下去了求大神补充。
<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>
相关文章：
1. javascript - 求一款靠谱点的移动端图片查看器插件，老司机速进！2. 为什么学习PHP3. html5 - vue.js中，如何对转义字符进行表达式判断？4. html5 - weex H5端的使用,怎么跑起来?5. CSS3可否做出这个效果？6. javascript - Meteor 中使用 bcrypt.compare 验证密码，如何在回调函数中修改全局变量？7. 老哥们求助啊8. mysql - 现在已经使用CommandArgument取到t_ID的值,现在还想取t_Name的值一起放到cs文件中的sql语句中该怎么做9. html - 急求，能否用flex或者高端点的CSS来布局这个图呢？不想用浮动或定位了10. 就一台服务器，mysql数据库想实现自动备份，如何设计？
网公网安备