<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content

来源：互联网发布：安装ubuntu u盘编辑：程序博客网时间：2024/05/17 06:11

<!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>

阅读全文

0 0