【移动端网页布局】flex 弹性布局 ① ( 传统布局与 flex 弹性布局 |
您所在的位置：网站首页 › 九宫格网页代码 › 【移动端网页布局】flex 弹性布局 ① ( 传统布局与 flex 弹性布局 |
【移动端网页布局】flex 弹性布局 ① ( 传统布局与 flex 弹性布局
|
【移动端网页布局】flex 弹性布局 ① ( 传统布局与 flex 弹性布局 | flex 弹性布局简单使用 | flex 弹性布局下直接为行内元素设置宽高 | flex 弹性布局设置权重 )
原创
韩曙亮_ 2023-05-06 00:42:21 ©著作权 文章标签 css html css3 移动端网页布局 flex弹性布局 文章分类 Html/CSS 前端开发 ©著作权归作者所有：来自51CTO博客作者韩曙亮_的原创作品，请联系作者获取转载授权，否则将追究法律责任文章目录一、传统布局与 flex 弹性布局二、flex 弹性布局简单使用1、代码示例 - flex 弹性布局下可以直接为行内元素设置宽高2、代码示例 - flex 弹性布局设置权重
一、传统布局与 flex 弹性布局 传统布局 特点 : 兼容性好 : 可以在 PC 端 / 移动端 , 各种新旧浏览器 中适配的非常好 , 显示效果基本一致 ;布局繁琐 : 要考虑 标准流 , 浮动 , 定位 等样式 ;局限性 : 鉴于上述问题 , 传统布局有很多局限性 , 移动端的页面没有必要兼容 PC 端 , 因此使用传统布局不是最佳选择 ;flex 弹性布局 特点 : 布局简单 : flex 布局非常简单 , 编写方便不兼容 PC 端 : 在 PC 端浏览器 , 兼容性很差 ;不兼容低版本浏览器 :不支持使用 flex 弹性布局 ;传统布局 与 flex 弹性布局选择 : PC 端页面 , 推荐使用 传统布局 ;移动端页面 , 不考虑兼容 PC 端页面 , 使用 flex 弹性布局 ;二、flex 弹性布局简单使用1、代码示例 - flex 弹性布局下可以直接为行内元素设置宽高
在下面的代码中 , 父容器设置了 flex 弹性布局显示样式 , 可以直接为该 父容器布局中的 行内元素设置宽高属性 ;
代码示例 : flex 弹性布局 div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 布局宽度充满整个 浏览器 / 设备 */ width: 100%; /* 布局高度 200 像素 */ height: 200px; /* 设置背景颜色 */ background-color: pink; } div span { /* flex 样式下可以直接为 行内元素设置宽高 */ width: 150px; height: 100px; background-color: skyblue; margin-right: 5px; } 1 2 3展示效果 :
2、代码示例 - flex 弹性布局设置权重
在下面的代码中 , 父容器设置了 flex 弹性布局显示样式 , 如果子容器中都设置了 flex:1 样式 , 则这些子容器平均布满整个父容器 ;
代码示例 : flex 弹性布局 div { /* 将展示样式设置为 flex 即可启用弹性布局 */ display: flex; /* 布局宽度充满整个 浏览器 / 设备 */ width: 100%; /* 布局高度 200 像素 */ height: 200px; /* 设置背景颜色 */ background-color: pink; /* 内容自适应设置 */ justify-content: space-around; } div span { height: 100px; background-color: skyblue; margin-right: 5px; /* 直接设置布局平均分为 3 等份 */ flex: 1; } 1 2 3展示效果 :
拉长浏览器 , 布局以及子元素都会自适应拉长 ;
赞 收藏 评论 分享 举报 上一篇：【移动端网页布局】flex 弹性布局 ② ( flex 弹性布局原理 | flex 容器属性 | 主轴与侧轴 | 设置主轴方向 flex-direction 样式 ) 下一篇：【每日随笔】两套知识与规则 ① ( 对人性认知的缺失的后果 | 儒家思想和法家思想 | 花拳绣腿与自由搏击 ) |
【本文地址】
今日新闻 |
推荐新闻 |