<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title></title> <style> .flex-parent { /*设置父元素为伸缩容器*/ display: -webkit-box; /*老版本：iOS 6-, Safari 3.1-6*/ display: -webkit-flex; /*新版本：Chrome*/ display: flex; /*标准规范：Opera 12.1, Firefox 20+*/ /*设置父元素内部的伸缩子元素项目换行规则：水平排列（row）不换行（nowrap）*/ -webkit-box-orient: horizontal; /*老版本：iOS 6-, Safari 3.1-6*/ -webkit-flex-flow: row nowrap; /*新版本：Chrome*/ flex-flow: row nowrap; /*标准规范：Opera 12.1, Firefox 20+*/ } .flex-son { /*设置子元素伸缩项目的伸缩比例*/ -webkit-box-flex: 1; /*老版本：iOS 6-, Safari 3.1-6*/ -webkit-flex: 1; /*新版本：Chrome*/ flex: 1; /*标准规范：Opera 12.1, Firefox 20+*/ /*此处无需设置宽度，因为flexbox会自动伸缩*/ height: 2rem; margin: 0 0.5rem; background: #000; } </style> </head> <body> <div class="flex-parent"> <div class="flex-son"></div> <div class="flex-son"></div> <div class="flex-son"></div> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content
猜你喜欢
转载自blog.csdn.net/lianxin19900610/article/details/73716009
今日推荐
周排行