一、传统布局与 flex 弹性布局
传统布局 特点 :
- 兼容性好 : 可以在 PC 端 / 移动端 , 各种新旧浏览器 中适配的非常好 , 显示效果基本一致 ;
- 布局繁琐 : 要考虑 标准流 , 浮动 , 定位 等样式 ;
- 局限性 : 鉴于上述问题 , 传统布局有很多局限性 , 移动端的页面没有必要兼容 PC 端 , 因此使用传统布局不是最佳选择 ;
flex 弹性布局 特点 :
- 布局简单 : flex 布局非常简单 , 编写方便 , 在移动端使用效果非常好 ;
- 不兼容 PC 端 : 在 PC 端浏览器 , 兼容性很差 ;
- 不兼容低版本浏览器 : 在 IE 11 及以下的低版本浏览器中 , 不支持使用 flex 弹性布局 ;
传统布局 与 flex 弹性布局选择 :
- PC 端页面 , 推荐使用 传统布局 ;
- 移动端页面 , 不考虑兼容 PC 端页面 , 使用 flex 弹性布局 ;
二、flex 弹性布局简单使用
1、代码示例 - flex 弹性布局下可以直接为行内元素设置宽高
在下面的代码中 , 父容器设置了 flex 弹性布局显示样式 , 可以直接为该 <div> 父容器布局中的 <span> 行内元素设置宽高属性 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局</title>
<style>
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;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
展示效果 :
2、代码示例 - flex 弹性布局设置权重
在下面的代码中 , 父容器设置了 flex 弹性布局显示样式 , 如果子容器中都设置了 flex:1 样式 , 则这些子容器平均布满整个父容器 ;
代码示例 :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 设置 meta 视口标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 弹性布局</title>
<style>
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;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
展示效果 :
拉长浏览器 , 布局以及子元素都会自适应拉长 ;
